:root {
  --branco: rgba(255, 255, 255, 0.89);
  --cinza: rgba(0, 0, 0, 0.733);
  --verde_claro2: rgb(152, 255, 173);
  --verde_normal: rgb(29, 194, 29);
  --vermelho: rgb(255, 0, 0);
  --preto: black;
}

body.active{
  overflow-y: hidden;
   height: 100%; 
}

html.active{
  overflow-y: hidden;
   height: 100%; 
}

/*estilizando o modal */

#content-modal {
  display: none;
}

#content-modal.active {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  bottom: 0px;
  background-color: var(--cinza);
  z-index: 40;
  backdrop-filter: blur(10px);
  overflow-y: scroll;
}

#modal {
  display: flex;
  flex-direction: column;
  width: clamp(40%, 50%, 55vw);
  height: auto;
  padding-bottom: 1%;
  border-radius: 20px;
  background-color: var(--branco);
  box-shadow: 1px 4px 10px var(--verde_claro2);
  z-index: 50;
  overflow: hidden;
}

.head-modal {
  display: flex;
  position: relative;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 50px;
}

#head-color {
  background-color: var(--verde_normal);
}

#head-color.active {
  background-color: var(--vermelho);
}

#fechar {
  font-size: 25px;
  margin: 15px;
  color: var(--branco);
  background-color: transparent;
  width: auto;
  height: auto;
  border: 0px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  cursor: pointer;
  transition: color 0.4s;
}
#fechar:hover {
  color: var(--preto);
}

/*estilizando o texto do modal*/

#content-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2%;
  width: 100%;
  height: auto;
}

/*estilizando os icones do modal*/
.icon {
  width: auto;
  font-size: clamp(0.4rem, 10vh, 3rem);
  margin-left: 5%;
}

#icon_sucess {
  display: none;
}

#icon_erro {
  display: none;
}

#icon_erro.active {
  display: block;
  color: var(--branco);
  background-color: var(--vermelho);
  padding: 1%;
  padding-bottom: 0px;
  padding-top: 0px;
  border-radius: 50%;
}

#icon_sucess.active {
  display: block;
  color: var(--verde_normal);
}

/*estilizando o texto do modal*/
#text {
  width: 100%;
  text-align: left;
  font-size: clamp(1.1em, 2vh, 4em);
  font-family: "Courier New", Courier, monospace;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/*media query*/

@media (min-width: 990px) {
  #text {
    font-size: 3.6vh;
  }
}

@media (max-width: 550px) {
  #modal {
    width: 80%;
    min-height: 130px;
  }

  #text {
    font-size: 3.6vh;
  }
}