/* Variavel com suas cores para cada modo */
body {
  --fundo: #ffffff;
  --texto: #111111;
  --fundo-input: #ccc;
  --fundo-logo: #ffffff;
  --fundo-azul: #96c3ec;
  --submit: #96c3ec;
  --submit-hover: #204b73;
  --login-adm: #204b73;
  --cadastrar: #0000f1;
}

body.dark {
  --fundo: #2e2e2e;
  --texto: #b9b9b9;
  --fundo-input: #4d4d4d;
  --fundo-logo: #b9b9b9;
  --fundo-azul: #204b73;
  --submit: #202020;
  --submit-hover: #204b73;
  --login-adm: #7598b9;
  --cadastrar: #7598b9;
}

.elementos {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding-top: 0px;
  padding-bottom: 0px;
  color: whitesmoke;
  font-weight: 500;
  font-size: 20px;
  font-family: "Verdana";
  background-color: var(--fundo);
  border-radius: 15px 25px 25px 15px;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.linhas {
  cursor: pointer;
}

/* MENU HAMBUERGUER */
.span {
  width: 28px;
  height: 4px;
  background-color: var(--texto);
  margin-bottom: 5px;
  border-radius: 2px;
  transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.elementos {
  /* flex-direction: column; */
  align-items: center;
  position: absolute;
  margin-left: 50px;
  padding: 20px;
  padding-right: 45px;
  width: auto;
  height: 20px;
  transform: translateX(110%);
}

.botao {
  cursor: pointer;
  background-color: var(--fundo);
  width: 2.5rem;
  margin-left: 0.3rem;
  height: 2.5rem;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  max-width: 100%;
  padding-top: 5px;
}

.barra-lateral {
  transform: translateX(5px);
  display: flex;
}

.linha-0 {
  transform: rotate(45deg) translate(6.5px, 5px);
}

.linha-1 {
  transform: scale(0);
}

.linha-2 {
  transform: rotate(-45deg) translate(7px, -6px);
}