@font-face {
  font-family: "Aeonik";
  src: url("/Aeonik-Black.otf") format("opentype");
  font-weight: 900; /* Standard weight for Black */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Bold.otf") format("opentype");
  font-weight: bold; /* Standard weight for Bold */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Light.otf") format("opentype");
  font-weight: 300; /* Custom weight for Light */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Medium.otf") format("opentype");
  font-weight: 500; /* Standard weight for Medium */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Regular.otf") format("opentype");
  font-weight: normal; /* Standard weight for Regular */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Thin.otf") format("opentype");
  font-weight: 100; /* Custom weight for Thin */
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url("Aeonik-Air.otf") format("opentype");
  font-weight: 200; /* Custom weight for Air */
  font-style: normal;
}

html {
  margin: 0;
  padding: 0;
  background-color: #000;
}

body {
  background: linear-gradient(
      0deg,
      rgba(12, 12, 13, 0.4) 0%,
      rgba(12, 12, 13, 0.4) 100%
    ),
    radial-gradient(86.19% 83.14% at 70.91% -13.32%, #3c4c60 0%, #0b0c0d 100%);
  margin: 0;
  padding: 0;
  color: var(--Neutral-Text-Weak, #627283);
  font-family: "Aeonik";
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
}

h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-feature-settings: "clig" off, "liga" off;
  font-family: Aeonik;
  font-size: 96px;
  font-style: normal;
  font-weight: 250;
  line-height: 108.333%;
  letter-spacing: -1px;
}

p {
  color: var(--Neutral-Text-Weak, #627283);
  font-family: Aeonik;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 120% */
  letter-spacing: -0.2px;
}

.unavailable {
  padding: 30px;
  height: 800px;
  background-position: right top;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("unavailable-background.webp");
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-symbol {
  height: 25px;
}

.logo-typography {
  margin-top: 10px;
  height: 20px;
}

.content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin-top: 180px;
}

@media (max-width: 1200px) {
  h1 {
    font-size: 60px;
  }
  p {
    font-size: 20px;
  }
}