:root {
  --font-family: "Jaro";

  --primary-color: #ff6666;
  --secondary-color: white;
  --carrousel-gap: 0;

  --title-size: 3.75rem; /* 60px */
  --subtitle-size: 1.25rem; /* 20px */
  --title-margin: -1.25rem; /* -20px */
  --carrousel-height: 7.25rem; /* 100px */

  --game-section-buttons-font-size: 1.5rem; /* 20px */
  --game-section-font-title: 2.5rem; /* 40px */
  --game-section-font-subtitle: 1.25rem; /* 20px */
  --game-section-icons-size: 2rem;
}

@media (min-width: 600px) {
  :root {
    --title-size: 7rem;
    --subtitle-size: 2.5rem;
    --title-margin: -2.5rem;
    --carrousel-height: 10rem;

    --game-section-buttons-font-size: 2.25rem;
    --game-section-font-title: 4.5rem;
    --game-section-font-subtitle: 2.25rem;
    --game-section-icons-size: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --title-size: 7rem;
    --subtitle-size: 2.5rem;
    --title-margin: -3.25rem;
    --carrousel-height: 10.75rem;

    --game-section-buttons-font-size: 1.5rem;
    --game-section-font-title: 3rem;
    --game-section-font-subtitle: 1.5rem;
    --game-section-icons-size: 2rem;
    --game-section-padding: 100px;
  }
}

@media (min-width: 1600px) {
  :root {
    --title-size: 10.75rem;
    --subtitle-size: 2.5rem;
    --title-margin: -3.25rem;
    --carrousel-height: 16.25rem;

    --game-section-buttons-font-size: 2.5rem;
    --game-section-font-title: 4.75rem;
    --game-section-font-subtitle: 2rem;
    --game-section-icons-size: 2.5rem;
    --game-section-padding: 200px;
  }
}

main {
  max-height: 100vh;
  overflow-y: scroll;
  scrollbar-width: thin;

  background-color: var(--primary-color);
}

section {
  font-family: var(--font-family);
  font-variation-settings: "wght" 400;
  font-weight: 100;

  place-items: center;
  justify-content: center;

  height: 100dvh;
  scroll-snap-align: center;
}

.load-wall {
  display: grid;
  place-items: center;

  position: absolute;
  height: 100dvh;
  width: 100vw;

  transition: opacity 2s;

  z-index: 2;
  background-color: var(--primary-color);
}

.hero-section {
  display: flex;
  flex-direction: column;
  gap: 10px;

  text-align: center;
  font-weight: bolder;

  color: white;
  background-color: var(--primary-color);
}

.hero-section__title {
  font-size: var(--title-size);
  margin-bottom: var(--title-margin);
}

.hero-section__subtitle {
  font-size: var(--subtitle-size);
}

.hero-section__carrousel {
  display: flex;
  overflow: hidden;
  height: var(--carrousel-height);
}

.carrousel__group {
  display: flex;
  flex-shrink: 0;

  will-change: transform;
  animation: scrolling 20s linear infinite;
}

.carrousel__item {
  border: 2px solid rgb(255, 255, 255);
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}