@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
    font-family: 'Poppins', sans-serif;
}

body{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    
}

.container{
    padding: 10px 8%;
    margin: 0px 0px;
    text-align: center;
}

#response{
font-size: 25px;
}

.hero{
    text-align: center;
    display: flex;
    box-shadow: 0px 0px 7px ;
    border-radius: 15px;
    justify-content: center;
    align-items: center;

}

.description{
    width: 50%;
    position: relative;
}

.form{
    position: relative;
   width: 50%;
}


.form #gender{
    padding: 10px 10px;
    margin-top: 25px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: none;
    background-color: rgb(164, 185, 185);
    width: 74%;
    font-size: 15px;
 }

 .form #row{
     
  margin-bottom: 25px;
 }


.form input{
    padding: 10px 10px;
    border-radius: 10px;
    border: none;
    background-color: rgb(164, 185, 185);
    width: 70%;
 }

.form #gender:focus, input:focus{
    outline: none;
  }

.form #btn{
    padding: 10px 10px;
     border: none;
     border-radius: 10px;
     background-color: rgb(108, 209, 209);
     cursor: pointer;
     margin-bottom: 20px;
 }

 .form #btn:hover{
   opacity: 0.8;
 }


 .form input:focus{
   outline: none;
 }

 span{
     color: red;
 }


 @media only screen and (max-width: 850px) {
     .hero{
         flex-direction: column;
     }

     .description{
         width: 90%;
     }

     #row{
         width: 100%;
     }

     img{
         width:50%;
     }

     .form{
width: 80%;
     }

     .form #gender{
width: 75%;
     }
 }