/* style.css */
*{
  padding: 0;
  margin: 0; 
  font-family: Arial, Helvetica, sans-serif;
}
 body{
    background-color: rgb(65, 63, 63);
   
 }

 .container{
    background-color: lightgrey;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80vh;
    height: 80vh;
    border-radius: 10px;
    padding: 50px 30px;
    max-width: 500px;
    min-width: auto;
    height: auto  ;
 }

 .stats{
    /* background-color: aqua; */
    text-align: right;
    font-size: 18px;
 }

 .stats span{
    font-weight: 600;
 }

 #quote{
    /* background-color: rgb(203, 215, 32); */
    text-align: justify;
    margin: 20px 0px;
 }

 textarea{
    resize:none;
    padding: 10px 5px;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
 }

 button{
    float: right;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    background-color: red;
    border: none;
    border-radius: 10px;
    color: white;
 }

 button:hover{
   margin-top: 19px;
   padding: 10.5px 30.5px;
   background-color: white;
   color: red;
   border:  0.5px solid whitesmoke;
 }

 .result{
    /* background-color: aqua; */
    margin-top: 80px;
    display: none;
 }
 .result p{
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
 }
 .wrapper{
    /* background-color: yellow; */
    display: flex;
    justify-content: space-around;
 }
 .wrapper span{
    font-weight: 600;
 }

 .success{
   color : green
 }

 .fail{
   color : red
 }
 
 @media  screen and (max-width:600px) {
   textarea{
      font-size: auto;
   }

   .container{
      width: 40vh;
      height: 70vh;
   }

  
 }