:root {
  font-size: 16px;
}

body,
html {
  height: 100%;
  width: 100%;
}

/* ------------------- HEADER --------------------------*/

header {
  background-color: #252525;
  color: #ffffff;
  font-family: 'Roboto Serif', serif;

  height: 69px;

  display: flex;
  align-items: center;
  justify-content: center;
}

header section {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 80%;
  max-width: 1024px;
}

header .container {
  display: flex;
  align-items: center;
  gap: 6px;
}
header .logo {
  width: 35px;
  height: 35px;
}

header h2 {
  font-size: 1rem;
  font-weight: bold;
}

.socialMedias {
  display: flex;
  align-items: center;
  gap: 20px;
}

.socialMedias i {
  font-size: 1.6rem;
}

.socialMedias i:hover {
  color: #fd6a9a;
  font-size: 1.8rem;
}

/* ------------------- MAIN --------------------------*/

/* ------------------- SECTION WELCOME --------------------------*/

.welcome {
  height: 699px;

  background-image: url(../assets/background-welcome-desktop.png);
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
}

.welcome .container {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 80%;
  max-width: 1024px;
}

.welcome h1 {
  font-family: 'Roboto Serif', serif;
  font-weight: bold;
  font-size: 3.18rem;
  color: #ffffff;
  text-align: center;

  width: 550px;
  margin-top: 110px;
}

.welcome figure {
  margin-top: 26px;
}

.welcome img {
  width: 120px;
  height: 120px;
}

/* ------------------- SECTION RELAX --------------------------*/
.relax {
  height: 768px;

  background-image: url(../assets/background-relax-desktop.png);
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
}

.relax .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  width: 80%;
  max-width: 1024px;
}

.relax h2 {
  font-family: 'Roboto Serif', serif;
  font-weight: bold;
  font-size: 3.06rem;
  color: #3a342f;
  text-align: left;

  width: 440px;

  margin-top: 185px;
}

.relax p {
  width: 400px;

  font-family: 'Roboto', sans-serif;
  font-size: 1.68rem;
  text-align: left;
  color: #3a342f;

  margin-top: 14px;
}

.relax input {
  width: 248px;
  height: 81px;

  background-color: #3a342f;
  font-family: 'Roboto', sans-serif;
  font-size: 1.68rem;
  font-weight: bold;
  color: #f4f2f3;

  border-radius: 44px;
  border: none;
  margin-top: 45px;
  margin-bottom: 183px;
}

.relax input:hover {
  background-color: #fd6a9a;
  color: #3a342f;
  border: 1px solid #fd6a9a;
  cursor: pointer;
}

/* ------------------- SECTION HEALTH --------------------------*/

.health {
  height: 768px;

  background-image: url(../assets/background-health-desktop.png);
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
}

.health .container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  width: 80%;
  max-width: 1024px;
}

.health h2 {
  font-family: 'Roboto Serif', serif;
  font-weight: bold;
  font-size: 3.06rem;
  color: #ffffff;
  text-align: left;

  width: 440px;

  margin-top: 155px;
}

.health p {
  width: 440px;

  font-family: 'Roboto', sans-serif;
  font-size: 1.68rem;
  text-align: left;
  color: #ffffff;

  margin-top: 14px;
}

.health input {
  width: 248px;
  height: 81px;
  position: relative;
  right: 188px;

  background-color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.68rem;
  font-weight: bold;
  color: #000000;

  border-radius: 44px;
  border: none;
  margin-top: 45px;
  margin-bottom: 153px;
}

.health input:hover {
  background-color: #3a342f;
  color: #ffffff;
  border: 1px solid #3a342f;
  cursor: pointer;
}

/* ------------------- SECTION SPONSORS --------------------------*/
.sponsors {
  height: 112px;

  background-color: #ffffff;

  display: flex;
  justify-content: center;
}

.sponsors .container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 80%;
  max-width: 1024px;
}

.sponsors p {
  width: 72px;

  font-family: 'Roboto Serif', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #fd6a9a;
}

.sponsors figure {
  width: 60%;
  display: flex;
  justify-content: space-evenly;
}

.sponsors img {
  width: 170px;
  height: 25px;
}

/* ------------------- FOOTER --------------------------*/
footer {
  height: 314px;

  background-color: #eb4a7b;

  display: flex;
  justify-content: center;
}

footer .container {
  display: flex;
  justify-content: space-evenly;

  width: 80%;
  max-width: 1024px;
}

.mobile-display {
  display: none;
}

.container .card {
  width: 200px;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

.container .card h3 {
  font-family: 'Roboto Serif', serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
}

.container .card ul {
  font-family: 'Roboto', sans-serif;
  font-size: 0.87rem;
  color: #ffffff;
  text-align: left;
  line-height: 30px;
}

/* -------------------- RESPONSIVIDADE FONT SIZE ----------------------*/
@media (max-width: 960px) {
  :root {
    font-size: 14px;
  }
}

/* ------------------- RESPONSIVIDADE DISPOSITIVOS 750 PIXELS --------------------------*/
@media (max-width: 750px) {
  :root {
    font-size: 14px;
  }

  header {
    height: 100px;
  }

  header section {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header .socialMedias {
    display: none;
  }

  header .logo {
    width: 70px;
    height: 70px;
  }

  header h2 {
    font-size: 2.2rem;
  }

  .welcome {
    height: 1168px;

    background-image: url(../assets/background-welcome-mobile.png);
    background-position: center;
    background-repeat: no-repeat;
  }

  .welcome .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
  }

  .welcome h1 {
    width: 500px;
    margin-top: 96px;

    font-size: 2.8rem;
  }

  .relax {
    height: 1334px;

    background-image: url(../assets/background-relax-mobile.png);
    background-position: center;
    background-repeat: no-repeat;
  }

  .relax .container,
  .health .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .relax h2 {
    margin-top: 180px;
  }

  .relax input {
    margin-bottom: 797px;
  }

  .health {
    height: 1334px;

    background-image: url(../assets/background-health-mobile.png);
    background-position: center;
    background-repeat: no-repeat;
  }

  .health h2 {
    width: 500px;

    margin-top: 142px;
  }

  .health input {
    position: inherit;

    margin-bottom: 834px;
  }

  .sponsors {
    height: 218px;
  }

  .sponsors .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .sponsors figure {
    width: 80%;
    display: flex;
    justify-content: space-evenly;
  }

  footer {
    height: 1000px;

    color: #ffffff;
  }

  footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding: 100px 0;
  }

  .mobile-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .mobile-display .socialMedias i {
    font-size: 2.4rem;
  }

  footer .socialMedias i:hover {
    color: #3a342f;
  }

  footer .figure-container {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .figure-container .footer-logo {
    width: 45px;
    height: 45px;
  }

  .figure-container h2 {
    font-size: 2.2rem;
  }

  .container .card {
    width: 200px;
    height: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .container .card ul {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 1.5rem;
  }
}

/* ------------------- RESPONSIVIDADE DISPOSITIVOS 660 PIXELS --------------------------*/

@media (max-width: 660px) {
  :root {
    font-size: 12px;
  }

  .welcome .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
  }

  .welcome h1 {
    width: 400px;
    margin-top: 96px;

    font-size: 3rem;
  }

  .welcome img {
    width: 120px;
    height: 120px;
  }
}

/* ------------------- RESPONSIVIDADE DISPOSITIVOS 550 PIXELS --------------------------*/

@media (max-width: 550px) {
  .welcome h1 {
    width: 100%;
  }

  .relax h2 {
    width: 100%;
  }

  .relax p {
    width: 100%;
    word-wrap: break-word;
  }

  .health h2 {
    width: 100%;
  }

  .health p {
    width: 100%;
    word-wrap: break-word;
  }

  .sponsors figure {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}