#passwordclasse {
  display: flex;
  animation: tremida 2s infinite;
}
#fecharconfig {
  display: flex;
  position: absolute;
  right: 1%;
  top: 1%;
  font-size: 24px;
  animation: tremida 5s infinite ease-in-out;
  cursor: pointer;
}


#configapititle {
  color: #fcf700;
  font-size: 36px;
}
#configapilabel{
  color: #b1af46;
  font-size: 28px;
}
#configuracao {
  display: flex;
  right: 0.4%;
  top: 0.4%;
  position: absolute;
  font-size: 70px;
  animation: pulse 5s infinite ease-in-out;
  cursor: pointer;
  animation: girar 2s infinite linear;
}
@keyframes girar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#configuracoes {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 10%; 
  max-width: 768px;
 
  overflow-y: auto; /* Habilita a barra de rolagem vertical quando indispensável */
  background-color: rgb(0, 0, 0);
}

.input-configAPIKEY {
  width: 100%;
  height: 80px;
  padding: 10px;
  margin: 5px 0;
  border: none;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: #b5f8b8;
  color: wheat;
  border: none;
  border-radius: 30px;
  font-size: 20px;
  color: navy;
  font-weight: 900;
  text-align: center;
  gap: 10px;
  text-align: center;
}
.input-configAPIKEY:hover {
  background-color: #00fc0d;
  box-shadow: 3px 3px 10px 10px rgb(2, 125, 240);
}

@media screen and (max-width: 768px) {
  #configuracao {
    display: flex;
    right: 0.4%;
    top: 0.4%;
    position: absolute;
    font-size: 40px;
    
    cursor: pointer;
    animation: girar 4s infinite linear;
  }
}