@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap");

* {
   font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

:root {
   /* Ajuste de cores da página */
   --header-bg-color: #164e45;
   --header-text-color: white;
   --header-text-color-2: #fffb02;
   --main-text-color: #0c2f4f;
   --button-color: #fffb02;
   --footer-bg-color: #ebebeb;
   --progress-bar-color: #b76a4f;
   --gradient-color: linear-gradient(
      to top,
      #298274 0%,
      #fff 25%,
      white 30%,
      transparent 100%
   );

   /* Ajusta o tamanho da imagem principal em pixels */
   --main-image-width: 400px;
   --main-image-width-mobile: 300px;
   --main-image-width-tablet: 350px;
   --image-ages-width: 250px;
   --image-ages-width-mobile: 200px;
}

html {
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 8rem;
}

body {
   user-select: none;
}

header {
   background-color: var(--header-bg-color);
   text-align: center;
   padding: 1rem;
}

header h1 {
   color: var(--header-text-color);
   font-size: 3rem;
}

header h1 #city {
   color: var(--header-text-color-2);
   text-decoration: underline;
}

header h1 #date {
   color: var(--header-text-color-2);
   text-transform: capitalize;
}

.main {
   background: var(--gradient-color);
   padding: 2rem 0;
}

.main .container {
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
   justify-content: center;
   max-width: 1200px;
   margin: auto;
   padding: 1.5rem;
}

.main .image {
   width: fit-content;
}

.main .image img {
   width: var(--main-image-width);
   transition: 0.3s all ease-in-out;
}

.main .image img:hover {
   transform: scale(1.07);
}

.main .cta {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex: 1;
   width: 100%;
}

.main .cta .headline {
   font-size: 4rem;
   font-weight: bold;
   text-align: center;
   margin-bottom: 2rem;
}

.main .cta .ages {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.main .cta .ages img {
   width: var(--image-ages-width);
   transition: 0.3s all ease-in-out;
}

.main .cta .ages img:hover {
   transform: scale(1.07);
}

.footer {
   background-color: var(--footer-bg-color);
   padding: 3rem 2rem;
}

.footer .footer-content {
   max-width: 1200px;
   margin: auto;
   text-align: center;
}

.footer .footer-content p {
   font-size: 1.5rem;
}

.footer .footer-content nav {
   margin: 3rem 0 2rem;
}

.footer .footer-content a {
   color: black;
   font-size: 1.8rem;
   font-weight: 500;
}

/* Responsivo */

@media (max-width: 1024px) {
   .main .container {
      flex-direction: column-reverse;
      gap: 0;
   }

   .main .image img {
      width: var(--main-image-width-tablet);
      margin: 0;
   }
}

@media (max-width: 450px) {
   header h1 {
      font-size: 2.3rem;
      line-height: 1.1;
   }

   .main {
      padding: 1rem;
   }

   .main .image img {
      width: var(--main-image-width-mobile);
      margin: 0;
   }

   .main .cta .headline {
      font-size: 3rem;
   }

   .main .cta .ages img {
      width: var(--image-ages-width-mobile);
      transition: 0.3s all ease-in-out;
   }

   .footer .footer-content p {
      font-size: 1.5rem;
   }

   .footer .footer-content a {
      font-size: 1.5rem;
   }
}