/*estilizando o o conteiner do modal*/
#content-modal {
  display: none;
}

#content-modal.active {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--cinza);
  backdrop-filter: blur(6px);
  z-index: 20;
  overflow-y: scroll;
}

/*estilizando o botao de fechar o modal*/

#fechar {
  align-self: last baseline;
  justify-self: right;
  width: 2.3em;
  height: 1.7em;
  background-color: transparent;
  border: 0;
  font-size: 1.6em;
  cursor: pointer;
  transition: color 0.6s;
}

#fechar:hover {
  color: var(--vermelho);
}

/*estilizando o modal*/

#modal {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5%;
  min-width: auto;
  width: 54%;
  min-height: auto;
  height: 30em;
  border-radius: 25px;
  left: 23%;
  top: 10%;
  background: var(--branco2);
  z-index: 500;
}

.input-group {
  display: flex;
  justify-content: center;
  position: relative;
  width: 80%;
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 1.5%;
  font-size: 1em;
  border-radius: 5px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 2px solid;
  outline: none;
  transition: border 0.4s, background-color 0.4s;
}

.input-group input:focus,
.input-group input:not(:placeholder-shown) {
  border: 2px solid var(--verde);
}

.input-group label {
  position: absolute;
  top: 20%;
  left: 2%;
  font-size: 1.1em;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: var(--prata);
  pointer-events: none;
  transition: 0.2s ease all;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: -52%;
  left: 4%;
  color: var(--verde);
}

.input-group .mens-error{
 position: absolute;
 bottom: -65%;
 left:2%;
 font-family:serif;
 font-weight:lighter;
 font-size:1.5vw;
 color:var(--vermelho);

}

#enviar {
  margin-top: 10px;
  min-width: 30%;
  padding: 1%;
  cursor: pointer;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 18px;
  transition: background-color 0.6s, transform 0.6s, color 0.6s;
  margin-bottom:0.1em;
}

#enviar:hover {
  background-color: var(--verde);
  color: var(--branco2);
  transform: scale(1.1);
}



@media (max-width:800px){
    #modal{
  width:80%;
  left:10%;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  top:-54%;
}

.input-group .mens-error{
  font-size: 2.60vw;
}
}