*{
    margin: 0;
    padding: 0;
}
#mainContener{
    background-image: url('https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    width: 100%;
    height: 250vh;
}
#mainContener::before{
    content: ' ';
    position: relative;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(52, 52, 175, 0.6);
}

#divMain{
    position: absolute;
    top: 60px;
    width: 60%;
    margin: 0 auto;
    left: 20%;
}
 .align-center{
     text-align: center;
    color: white;
  font-family:  'Poppins', sans-serif;
 }

 #title{

     font-size: 35px;
 }

 #description{
     padding-top: 10px;
 }

 #formDiv{
    padding: 40px;
    border-radius: 10px;
    margin-top: 20px;
    height: 100%;
     background-color: rgba(27, 27, 50, 0.8);
 }

 label{
     color: white;
     font-size: 1.125rem;
     font-weight: bold;
     display: block;
     margin: 5px;
 }
 .radio{
     display: inline;
 }
 input[type="text"], input[type="number"], select {
     width: 80%;
     border-radius: 3px;
     margin: 5px;
     box-sizing: border-box;
     border: 1px solid;
    border-radius: 0.25rem;
    height: 2.375rem;
 }
 textarea{
     width: 80%; ;
 }

 .inputField{
    width: 100%;
    height: 2.6em;
    padding-left: 10px;
    margin-top: 5px;
    border-radius: 5px;
 }

 .recommend{
    margin-bottom: 0.7em;
 }

 .textArea{
    width: 100%;
 }

 .submit{
    background-color: #37af65;
    height: 3.7em;border-radius: 5px;
    font-size: 1.125rem;
 }

 span{
     color: white;
 }