@font-face {
  font-family: "Bariol";
  font-style: normal;
  font-weight: 400;
  src:
    local("Bariol Regular"),
    url("fonts/bariol/regular/bariol_serif_regular-webfont.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "GT Ultra";
  font-style: normal;
  font-weight: 200;
  src:
    local("GT Ultra Fine Thin"),
    url("fonts/gt-ultra/GT-Ultra-Fine-Thin.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "GT Ultra";
  font-style: normal;
  font-weight: 400;
  src:
    local("GT Ultra Fine Regular"),
    url("fonts/gt-ultra/GT-Ultra-Fine-Regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "GT Ultra";
  font-style: normal;
  font-weight: 700;
  src:
    local("GT Ultra Fine Bold"),
    url("fonts/gt-ultra/GT-Ultra-Fine-Bold.woff") format("woff");
  font-display: swap;
}

body {
  background-color: #000;
  color: #fefefe;
  font-family: Bariol, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  text-rendering: optimizeLegibility;
  padding: 2rem;
  padding-top: 264px;
  position: relative;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.background > img {
  max-width: 100%;
}

h1,
h2 {
  margin: 0;
}

.logo-home {
  height: auto;
}

.home-headline {
  text-align: center;
  font-family:
    GT Ultra,
    Arial,
    sans-serif;
  font-size: clamp(24px, 5vw, 48px);
  font-style: normal;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -0.01px;
  text-shadow:
    0 4px 4px #000,
    0 3px 21px #000,
    0 3px 21px #000,
    0 3px 21px #000;
}

h1.home-headline .home-headline-yellow,
a {
  color: #ffda00;
}

h2,
a {
  text-align: center;
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  text-shadow:
    0 4px 4px #000,
    0 3px 21px #000,
    0 3px 21px #000,
    0 3px 21px #000;
}

a {
  font-weight: 200;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 1199.98px) {
  .text-container {
    position: absolute;
    top: 22vw;
    width: 100%;
    left: 0;
  }

  .logo-home {
    width: 280px;
  }

  h2,
  a {
    font-size: 26px;
  }
}

@media (max-width: 767.98px) {
  h2,
  a {
    font-size: 20px;
  }
}