@font-face {
  font-family: "D-DIN";
  src: url("../fonts/D-DIN-Italic.woff2") format("woff2"),
  url("../fonts/D-DIN-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-family-base: "D-DIN", system-ui, sans-serif;
  --font-family-serif: "Montserrat", sans-serif;
}

html, body, .landing {
  min-height: 100dvh;
}

body {
  margin: 0;
  background:    url('../images/bg.png'),
      linear-gradient(
          251.17deg,
          rgba(19, 7, 107, 1) 0%,
          rgba(56, 18, 99, 1) 100%
      );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-size: cover;
  text-transform: uppercase;
}

.landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.landing__text {
  font-weight: 400;
  font-style: italic;
  font-family: var(--font-family-base);
  font-size: clamp(40px, calc(0.019 * 100vw + 33.25px), 70px);
  text-align: center;
}

.landing__text span {
  background: linear-gradient(180deg, #FFFFFF 38.76%, #381263 86.93%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing__button {
  width: clamp(235px, calc(0.25 * 100vw + 141.25px), 621px);
  padding-block: 10px;
  font-family: var(--font-family-serif);
  font-weight: 900;
  font-size: clamp(24px, calc(0.04 * 100vw + 9px), 70px);
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  background-color: #1d1d1d;
  border-radius: clamp(16px, calc(0.016 * 100vw + 10px), 42px);
  border: 4px solid #00ffb9;
  box-shadow:
      inset 0 15px 0 0 #000000,
      0 6px 4px 0 #02FFC16B,
      0 -6px 4px 0 #02FFC16B,
      6px 0 4px 0 #02FFC16B,
      -6px 0 4px 0 #02FFC16B;
}

@media (max-width: 767px) {
  body {
    background:    url('../images/bg-mobile.png'),
    linear-gradient(251.17deg, rgba(19, 7, 107, 1) 0%, rgba(56, 18, 99, 1) 66.45%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .landing__text span {
    display: block;
    background: linear-gradient(180deg, #FFFFFF 50%, #381263 86.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .landing__button {
    box-shadow: 0 8px 0 0 #000000 inset,
    0 6px 4px 0 #02FFC16B,
    0 -6px 4px 0 #02FFC16B,
    6px 0 4px 0 #02FFC16B,
    -6px 0 4px 0 #02FFC16B;;
  }

  .hide-mobile {
    display: none;
  }
}

@media (min-width: 767px) {
  .hide-desktop {
    display: none;
  }
}