:root {
    --lilas: #8888EA;
    --laranja: #FCA82F;
    --roxo: #6066D0;
    --cinza-escuro: #535050;
}

body {
    margin: 2%;
    font-family: 'Poppins', sans-serif;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li {
  display: inline-block;
  padding: 0px 0px 15px 20px;
  font-size: 15px;
  color: #000;
}

nav li:hover {
  color: var(--lilas);
  cursor: pointer;
}

/* ----- Menu Dropdown para as Configurações ----- */

.dropdown {
  position: absolute;
  background-color: #fff;
  display: none;
}

nav li:hover ul,
.menu li:hover ul {
  display: block;
  right: 0;
  width: 200px;
}

.li-dropdown {
  padding-top: 20px;
}

.li-dropdown:hover {
  background-color: var(--roxo);
  color: #fff;
  width: 90%;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

/* ----- Fim do Menu Dropdown ----- */

header {
  font-family: 'Press Start 2P', cursive;
  font-size: 25px;
  text-shadow: 2px 3px var(--lilas);
  color: #000;
}

.contato {
    display: flex;
    width: 100%;
    height: 100vh;
    margin-top: 80px;
    align-items: center;
    gap: 100px;
  }

  .contato-titulo {
    text-transform: uppercase;
    font-size: 2.5rem;
    letter-spacing: 0.5rem;
  }

  .esquerda-col {
    width: 40vw;
    height: 100%;
    background-image: url("../assets/imgs/undraw_quiz_re_aol4.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 100px;
  }
  
  .direita-col {
    width: 40vw;
    height: 100vh;
    padding: 4rem 5.5rem;
    display: block;
  }

.contato-descricao {
  font-size: 1.1rem;
  letter-spacing: 0.01rem;
  width: 40vw;
  margin: 0.25rem 0;
}

.nome-logado {
    color: var(--laranja);
    font-weight: bold;
    font-size: 20px;
}

/* Início de formulário */ 


form {
  width: 31.25rem;
  position: relative;
  margin-top: 1rem;
  padding: 1rem 0;
}

fieldset {
  border: 0;
}

input, select, textarea {
  border-radius: 2px;
  width: 20vw;
  display: block;
}

label {
  padding-top:1em;
  text-transform: uppercase;
  font-size: 1rem;
  margin-top: 20px;
}

.campo {
  padding-bottom: 2px;
}

.campo label {
  margin-bottom: 0.2em;
  display: block;
}

fieldset .campo {
  float: left;
  margin-right: 1em;
}

.campo input[type="text"], .campo select, .campo textarea {
  background: #d8d8d8;
  border: none;
  border-bottom: 1px solid #000;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  outline: none;
}

textarea {
  resize: none;
  height: 15em;
  width: 29em;
}

.campo select option{
  padding-right: 1em;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  background-color: #e9e9e9;
  padding-left: 3px;
}

.btn-enviar {
  display: block;
  border-radius: 2px;
  font-size: 1.2em;
  background: var(--lilas);
  border: 0;
  margin-bottom: 1em;
  color: white;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
  padding: 0.3em 1.7em;
  margin-left: 65px;
  margin-top: 30px;
  
  transform: translate(-50%, -50%);
}

.btn-enviar:hover {
background: var(--laranja);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
cursor: pointer;
}

/*Fim do formulário */ 



/* Responsividade */ 
/* Para telas menores: celulares até 767px */

@media screen and (min-width: 0) and (max-width: 767px) {
.contato {
  gap: 0;
  width: auto;
}
.esquerda-col {
    display: none;  
}

.direita-col {
    margin: 3%;
    padding: 0;
    width: 95%;
}

.contato-titulo {
  font-size: 2rem;
  text-align: center;
}

form {
  margin-top: 5px;
  padding: 0.4rem 0;
  width: 95%;
}

.contato-descricao {
  font-size: 1rem;
  width: 95vw;
}

input, select, textarea {
  border-radius: 2px;
  width: 25vw;
}

label {
  padding-top:0.2em;
  font-size: 1em;
}

.campo {
  padding-bottom: 2px;
}

.campo label {
  margin-bottom: 0.2em;
  display: block;
}

.campo input[type="text"], .campo select, .campo textarea {
  padding: 0.4rem 0;
  margin-bottom: 0.4rem;
}

.campo textarea {
  resize: none;
    height: 9em;
    width: 100%;
  }

  .btn-enviar {
    margin: 20px auto;
    transform: none;
  }
}