html, body {       
       font-family: Arial, Helvetica, sans-serif; /* Define a família de fontes */
      height: 100%;
      background-color: #121212;
      color: #e0e0e0;
    }
    body {
      display: flex;
      flex-direction: column;
       align-items:center;
       justify-content:center;
       min-height:100vh;
      margin: 0;
    }

    header {margin-top: 7px;}
   
    main {
      flex: 1;
    }
    footer {
       color: #ddd;
      padding: 5px 5;
      text-align: center;
      font-size:small;
      
    }

 form {
    max-width: 600px; /* Largura máxima de 600px para telas grandes */
    margin: 0 auto; /* Centraliza o formulário horizontalmente */
  }

  @media (max-width: 768px) {
    form {
      max-width: 100%; /* Em dispositivos menores, o formulário ocupa toda a largura */
    }
  }


.line-message-1 {
 
  font-weight: bold; /* Destaca a frase */
  color: #f8f9fa; /* Branco para contraste */
  text-align: center;
  margin-bottom: 30px; 
}


.line-message-1 {
  font-size: 34px;
}
@media (max-width: 576px) {
  .line-message-1 {
    font-size: 25px; /* Ajuste para telas pequenas */
  }
}


.line-message-2 {

  font-weight: 400;
  color: #eee;
  text-align: center;
  margin-bottom: 30px;
}


.line-message-2 {
  font-size: 26px;
}
@media (max-width: 576px) {
  .line-message-3 {
    font-size: 18px; /* Ajuste para telas pequenas */
  }
}


.line-message-3 {

  color: #ffc107; /* Tom semelhante ao "warning" do Bootstrap */
  text-align: center;
  margin-bottom: 30px;
}

.line-message-3 {
  font-size: 17px;
}
@media (max-width: 576px) {
  .line-message-2 {
    font-size: 16px; /* Ajuste para telas pequenas */
  }
}

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  outline:none;
}

#neonShadow{
  height:50px;
  width:100px;
  border:none;
  border-radius:50px;
  transition:0.3s;
  background-color:rgba(156, 161, 160,0.3);
  animation: glow 1s infinite ;
  transition:0.5s;
}
span{
    display: block;
    width: 100%;
    height: 100%;
    font-weight: 700;
    padding-top: 15%;
    padding-right: 2.5%;
    margin-right: 0px;
    font-size: 1.2rem;
    transition: 0.3s;
    opacity: 0;
    }
span:hover{
    transition: 0.3s;
    opacity: 1;
    font-weight: 700;
    }

#neonShadow:hover{
  transform:translateX(-20px)rotate(30deg);
  border-radius:5px;
  background-color:#c3bacc;
  transition:0.5s;
}

@keyframes glow{
  0%{
  box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168);}
  
  50%{
  box-shadow: 5px 5px 20px rgb(81, 224, 210),-5px -5px 20px rgb(81, 224, 210)
  }
  100%{
  box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168)
  }
}