#containers {
    padding-top: 100px;
 }
 
 .recover-password {
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 132px;
     margin-top: 75px;
     background-color: rgb(221, 221, 221);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 500px;
 }

 .recover-password h3 {
   text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
 }

 .introduction {
   width: 85%;
   text-align: center;
}

 .submission {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
 }

 .email {
    width: 75%;
    margin-top: 25px;
 } 
  
 .email 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 {
   display: none;
}

.error {
   color: red;
}

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

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

   .email input {
      font-size: 12.5px;
   }  
   
   .recover-password {
      width: 85%;
  }

  .introduction {
  font-size: 12.5px;
}

}

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

   .email input {
      font-size: 12.5px;
   }  
   
   .separator {
      display: block;
   }

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

  .introduction {
      font-size: 12.5px;
   }

   .error {
      font-size: 12.5px;
   }

}


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

   #containers {
       width: 111.75%;
   }

}