html,body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1D1B1B;
  }
  #container{
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 50%;
    background: #EC4D36;
    position: absolute;
    align-items: center;
    border-radius: 5%;
    color: #1D1B1B;
    box-shadow: 5px 5px 5px  rgb(56, 9, 9);
    opacity: 0; 
    animation: fadeIn 1s ease-in-out forwards; 
  }
  
  #container input{
    position: relative;
    width: 20em;
    height: 3em;
    border: none;
    outline: none;
    box-shadow: 5px 5px 5px;
    margin-top: 1em;
    border-radius: 5px;
    opacity: 0; 
    animation: fadeIn 3s ease-in-out forwards; 
  }
 
  ::placeholder{
    color: #1D1B1B;
    font-family: sans-serif;
    font-size: 16px;
  }
  #container h1{
    font-family:sans-serif ;
    margin-top:1em ;
    opacity: 0; 
    animation: fadeIn 2s ease-in-out forwards; 
  }
  #container span{
    font-family:sans-serif ;
    margin-top:2em ;
    font-size: 16px;
      align-text:center;
    opacity: 0;  
  }
  #btn{
    width: 8em;
    height: 4em;
    background: #1D1B1B;
    color: #EC4D36;
    font-family: sans-serif;
    font-size: 15px;
    margin-top: 3em;
    border: none;
    outline: none;
    box-shadow: 5px 5px 5px rgb(129, 29, 29);
    border-radius: 5px;
    opacity: 0; 
    animation: fadeIn 4s ease-in-out forwards; 
  }
  @keyframes fadeIn {
    0% {
      opacity: 0; 
    }
    100% {
      opacity: 1; 
    }
  }
 #ans{
    margin-top:1em;
    animation: flash 1s infinite;
  }
  @keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
@media (max-width:450px){

    #container{
        width: 90%;
        height: 60%;
      }
}