#containers {
    padding-top: 100px;
 }

 .message {
   text-align: center;
   margin-top: 3%;
   margin-left: auto;
   margin-right: auto;
   width: 85%;
 }

 .login {
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 68px;
     margin-top: 50px;
     background-color: rgb(221, 221, 221);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 500px;
 }

 .login h3 {
    margin-top: 50px;
    margin-bottom: 50px;
 }

 .email {
    width: 75%;
 } 

 .password {
    width: 75%;
    margin-top: 50px;
 } 

 .password-recover {
    text-align: center;
    font-size: 13px;
    width: 75%;
    margin-top: 5px;
 } 

 .submission {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
 }
  
 .email input,
 .password input {
    width: 100%;
    font-size: 20px;
 }  

 .submission input {
   font-family: 'Short Stack';
    background-color: slateblue;
    color:white;
    width: 150px;
    height: 50px;
    border: none;
    border-radius: 30px;
 }

 .slateblue-hover:hover {
    background-color: rgb(125, 114, 198) !important;
} 

.separator-1,
.separator-2 {
   display: none;
}

.error {
   color: red;
}

 /* --- Janela reduzida --- */
 

 @media screen and (max-width: 550px) {
   
   .login {
      width: 85%;
  }

  .email input,
  .password input {
     font-size: 12.5px;
  } 

  .password-recover {
   width: 100%;
   font-size: 12.5px;
}
   
   .separator-2 {
      display: block;
   }
   

}

@media screen and (max-width: 440px) {

   .login h3 {
       margin-top: 20px;
       margin-bottom: 20px;
    }

    .error {
      font-size: 12.5px;
   }

}


 @media screen and (max-width: 320px) {

   .password-recover {
      font-size: 12.5px;
   }

   .separator-1 {
      display: block;
   }

   #containers {
       width: 111.75%;
   }

}