/* Fontes */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

/* Variáveis */
:root {
  --preto: #2D2D2D;
  --branco: #FDFFF3;
  --primaria: #1E77D0;
  --secundaria: #E6F7FF;
  --botao: #1D52FF;
}

/* Ajuste de rem */
html {
  font-size: 62.5% !important;
}

/* Reset css */
*,
a,
ul {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  list-style-type: none;
  font-size: 1.8rem;
  font-family: "Roboto", Helvetica;
  color: var(--preto);
}

body {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: var(--branco);
}

/* Principais títulos e subtítulos */
h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 2.1rem;
}

/* Padronização das mains */
main,
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: column;
  width: 100%;
}

.container {
  height: 75vh;
  width: 100vw;
  padding: 0 5VW;
  overflow-y: scroll;
}

/* Padronização do card título inicial das páginas */
.titulo {
  text-align: center;
  font-size: 2rem;

  & * {
    margin-block: 2vh;
  }

  & p {
    font-size: 2rem;
  }
}

/* Padronização de inputs */
form,
fieldset {
  display: flex;
  align-items: center;
  flex-flow: column;
  outline: none;
  border: none;
  width: 100%;
  max-width: 600px;
}

fieldset {
  width: 90%;
  gap: 2vh;
}

label {
  display: flex;
  align-items: center;

  width: 100%;
  padding: 1.5vh 4vw;
  border-radius: 1vw;
  outline: 2px solid rgba(0, 0, 0, 0.4);
  gap: 3vw;

  & img {
    height: 1.5rem;
    opacity: 0.5;
  }
}

input {
  width: 100%;
  border: none;
  outline: none;
  background: none;
}

#criar-lembrete {
  width: fit-content;
}

/* Padronização de botão */
.botao {
  margin-block: 2vh;
  padding: 2.5vh 8vw;
  border-radius: 1.5rem;
  font-weight: 700;

  background: var(--botao);
  color: var(--branco);
}

.botao:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Media queries */

/* Extra Small devices (phones, 600px and down) */
@media (max-width: 767px) {
  .header-desktop {
    display: none;
  }

  .container {
    padding: 0 5vw;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
  .header-mobile {
    display: none !important;
  }

  .header-desktop {
    display: flex !important;
  }

  .container {
    height: 85vh;
    padding: 5vh 15vw 0 15vw;
  }

  .carrosselParcerias {
    width: 70vw;
  }

  .bottom-menu {
    display: none;
  }

  footer {
    justify-content: space-between !important;
  }

  footer nav {
    width: fit-content !important;
    max-width: 40%;
    gap: 1rem;
  }

  .linha {
    order: 1;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {

  .hero,
  .hero section {
    min-width: 85%;
  }
}

/* Extra-Large devices (large laptops and desktops, 1300px and up) */
@media (min-width: 1300px) {
  .hero img {
    max-height: 55vh !important;
  }
}

/* Uso de !important devido a ordem de import de globals.css */