*{
  font-family:"Trebuchet MS", Helvetica, sans-serif
}

header{
  font-size:2em;
  font-weight:bold;
  margin:20px;
}
#form-outer{
  background-color:rgb(250,250,250);
  margin:0 auto;
  border:2px solid;
  width:95%;
  padding:10px;
  
}


 .labels{
   display:inline-block;
  text-align:right;
  width:40%;
   padding:5px;
  vertical-align:middle;
} 
.rightTab{
    
  display:inline-block;
   text-align:left;
  width:48%;
  padding:5px;
  vertical-align:middle;
}
.centerTab{
    
  display:inline-block;
   text-align:left;
  width:100%;
  padding:5px;
  vertical-align:middle;
  float: left;
}
.input-field{
  height:20px;
  width:280px;
  padding:5px;
  margin:10px;
  border:2px solid;

 
}
#userAge{
  width:55px;
}


.userRatings, input[type="checkbox"]{
 float:left;
margin-right:5px;
}
button[type="submit"]{
  background-color:rgba(0,250,250,0.2);
  height:32px;
  width:70px;
  margin:10px;
  border: 2px solid;
}

select{
 height:35px;
  width:140px;
  padding:5px;
  margin:10px;
  border:2px solid;
  
}

@media screen and (max-width: 833px) {
  .input-field{
  width:80%;
  }
  select{
    width:90%;
  } 
  
 
  
  
}
@media screen and (max-width: 520px) {
  .labels{
    width:100%;
    text-align:left;
  }
  .rightTab{
    width:80%;
    float:left;
  }
  .input-field{
  width:100%;
  }
  select{
    width:100%;
  }   
}