* {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
}
body{
     font-size: 10px;

}
.flex {
     display: flex;
     justify-content: center;
     align-items: center;
}
.container {
     flex-direction: column;
     padding: 2rem;
     width: 50%;
}
#survey-form {
     flex-direction: column;
     box-shadow: 0px 1px 10px 1px #c2b7b7;
     margin: 2%;
     padding: 3%;
     font-size: 1.3rem;
     align-items: flex-start;
}
#title {
     font-size: 2.1rem;
     margin: 5% 2% 1%;
}
#description {
     font-size: 1.2rem;
     color: rgba(69, 69, 69, 0.831);
     margin-bottom: 5%;
}
label,p {
     margin: 1.1% 0%;
}
input,option,select {
    width: 100%;
    height: 30px;
    border-radius: 3%;
    padding-left: 3%;
    margin-bottom: 4%;
    font-size: 1.1rem;
}
.ratio_boxes {

    gap: 9px;
    margin-left: 2%;
    text-wrap: nowrap;
    
}
.ratio_container {
flex-direction: column;
align-items: flex-start;
margin: 4% 0%;
}
.checkbox_box {
    
     text-wrap: nowrap;
     height: 100%;
}
.checkbox_box input {
     margin-right: 3%;
}
#textarea {
     width: 100%;
     height: 80px;
     padding: 4%;
     margin-bottom: 5%;

}
#submit_btn {
     align-self: center;
     cursor: pointer;
     border: none;
     background-color: rgb(202, 199, 199);
    padding: 1%;
    width: 20%;
}
#submit_btn:hover{
     background-color: white;
     box-shadow:0px 1px 10px 1px #c2b7b7 ;
}
@media (max-width:600px){
     .container {
          
          width: 90%;
     } 
     #title {
          font-size: 1.5rem;
          
      }
      #description {
          font-size: 1rem;
     text-wrap: nowrap; }
     #survey-form {
       
          padding: 5%;
     }
     p,label,input,option,select{
          font-size:1rem;
     }
     input,option,select
     {
          height: 25px;
     }
}