@font-face {
  font-family: 'Quarion Bold';
  src: url('../assets/fonts/Quarion-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Quarion';
  src: url('../assets/fonts/quarion.otf') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Quarion';
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #151614 0%, #A367E7 85%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coming-soon-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
}

.media-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header-container {
  display: flex;
  flex-direction: column;
  gap: 0.0525rem;
}

.subtitle {
  font-size: 5rem;
  font-weight: 700;
  line-height: 5.5rem;
  font-family: 'Quarion Bold';
  background: linear-gradient(90deg, #FFFFFF 20%, #A367E7 42.32%, #FBA1B7 61.55%, #FFF0F5 75%), linear-gradient(95.4deg, rgba(255, 255, 255, 0) 12.56%, rgba(255, 255, 255, 0.2) 87.44%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Inner Shadow (Inset) */
  text-shadow: 0px 2.65px 2.65px rgba(0, 0, 0, 0.01);

  /* Outer Drop Shadow */
  filter: drop-shadow(0px 2.65px 7.96px rgba(0, 0, 0, 0.1));

}

.description {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.9625rem;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.elephant-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 15.625rem;
  width: 35.6875rem;
  z-index: 1;
}

.icon {
  width: 2rem;
  height: 2rem;
}

.title {
  width: 52.5rem;
}

.circle-left {
  display: flex;
  position: absolute;
  left: -1rem;
  top: -1rem;
}

.circle-right {
  display: flex;
  position: absolute;
  right: -1rem;
  top: -1rem;
}

@media (max-width: 1024px) {
  body {
    background: linear-gradient(180deg, #151614 -13.08%, #A367E7 90.92%);
  }
  .circle-left {
    display: flex;
    position: absolute;
    left: -1rem;
    top: -1rem;
    width: 15rem;
    height: 15rem;
  }

  .circle-right {
    display: flex;
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 25rem;
    height: 25rem;
  }

  .coming-soon-container {
    gap: 4.375rem;
  }

  .header-container {
    max-width: 20.625rem;
    gap: 0.5rem;
  }

  .title {
    width: 100%;
  }

  .subtitle {
    font-size: 2rem;
    line-height: 2.2rem;
  }

  .elephant-shadow {
    left: -5rem;
    width: 18.75rem;
    height: 8rem;
  }
}