:root {
  --bg-color-blue-dark: #192a39;
  --bg-color-blue-light: rgb(43, 65, 83);
  --bg-color-brown-dark: #0a141d;
}

h1 {
  font-size: 25px;
  text-align: center;
}

p {
  font-size: 1.3rem;
  text-align: center;
  max-width: 100%;
  width: 600px;
  color: var(--bright-white);
}

section {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* FIRST */

.first {
  background-color: var(--bg-color-blue-dark);
}

.first #city-img {
  width: 100%;
  padding-top: 13%;
  background-image: url("/assets/landing/city.webp");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first #main-logo {
  width: 50%;
}

.first #peli-signup {
  width: 300px;
  max-width: 60%;
  cursor: pointer;
}

.first #peli-signup:hover {
  opacity: 0.8;
}

/* SECOND */

.second {
  height: 100%;
  padding-top: 8%;
  background-color: var(--bg-color-blue-light);
  background-image: url("/assets/landing/water_bg.webp");
  background-size: 65%;
  background-position: right;
  background-repeat: no-repeat;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.second-container-1 {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.second-container-2 {
  min-width: 300px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.second #scroll-img {
  width: 60%;
}

.third {
  background-color: var(--bg-color-brown-dark);
  padding-top: 30px;
  padding-bottom: 30px;
}

.third #sm-map-img {
  /* border: 1px solid red; */
  width: 100%;
  height: 50%;
  background-image: url("/assets/landing/small_map_bg.webp");
  background-size: 35%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

#scroll-svg {
  width: 10%;
  height: auto;
}

#lg-map-img {
  width: 100%;
  height: auto;
}

.fourth {
  background-color: var(--bg-color-blue-dark);
  flex-direction: row;
  flex-wrap: wrap;
}

.first-container-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#dice-svg {
  width: 100px;
  margin-bottom: 30px;
}

#character-img {
  width: 40%;
}

.fourth p {
  width: 300px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet and below */
@media (max-width: 900px) {
  .second {
    background-size: 100%;
    background-position: bottom;
  }

  .second-container-1,
  .second-container-2 {
    width: 100%;
    padding: var(--space-lg);
  }

  .second #scroll-img {
    width: 50%;
    max-width: 300px;
  }

  .fourth {
    flex-direction: column-reverse;
  }

  #character-img {
    width: 60%;
    max-width: 350px;
  }

  .first-container-1 {
    padding: var(--space-lg);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .first p {
    padding: 0 var(--space-md);
    font-size: 1.1rem;
  }

  .first #main-logo {
    width: 80%;
  }

  .third #sm-map-img {
    background-size: 80%;
    padding: var(--space-lg);
  }

  .third #sm-map-img h1 {
    font-size: 1.3rem;
  }

  .third #sm-map-img p {
    font-size: 1rem;
    padding: 0 var(--space-sm);
  }

  #scroll-svg {
    width: 15%;
  }

  .second-container-2 h1 {
    font-size: 1.3rem;
  }

  .second-container-2 p {
    font-size: 1rem;
    padding: 0 var(--space-sm);
  }

  .fourth p {
    width: 100%;
    padding: 0 var(--space-md);
    font-size: 1rem;
  }

  .fourth h1 {
    font-size: 1.3rem;
  }

  #character-img {
    width: 80%;
  }
}