body{
  font-family: Open Sans;
  background-color:lightgrey;

}

h2{
  text-align: center;
  background-color:#FF6045;
  color:black;
  width:100%;
  border-radius: 5px;
}

h1{
  text-align: center;
}

#normalwrapper{
 
  max-width: 1200px;
  margin:auto;
  background-color: #e8e8e8;
  background-color:white;
  padding:8px;
  border-radius: 5px;
}

#questionanswerbutton{
  border-radius: 5px;
  display:block;
  background-color: #3998FF;
  padding:20px;
  margin-bottom:10px;
  text-align: center;
  border:3px solid lightblue;
}



#submitanswer{
  width:100%;
  height: 50px;
  background-color: #4DCB6D;
  border-radius: 5px;
  border:1px solid #4DCB6D;
}

form {
  margin: 40px 0;
}

div {
  clear: both;
  margin: 0 50px;
}

label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

/* hide input */
input.radio:empty {
  margin-left: -111999px;
}

/* style label */
input.radio:empty ~ label {
  position: relative;
  float: left;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.radio:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
  content:'\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
  color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
  content:'\2714';
  text-indent: .9em;
  color: #9CE2AE;
  background-color: #4DCB6D;
}

input.radio:checked ~ label {
  color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.quizform:after {
  content:"";
  display:block;
  clear:left;
}

#usernamefield{
  width:100%;
  height: 50px;
  
  border-radius: 5px;
  border:1px solid black;
}