html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}



#quiz h1 {
  font-size: 1.4em;
  text-align: left;
  line-height: 44px;
}

#question h2 { 
  margin-bottom: 16px;
  font-size: 1em;
}


#question input[type=radio] {
  display: none;
}

#question label {
  display: flex;
    margin: 4px;
    padding: 8px;
    background: #FAE3BB;
    color: #4C3000;
    /* width: calc(40% - 8px); */
    width: 95%;
    /* min-width: 340px; */
    cursor: pointer;
    flex: 1 1 100%;
  }
  
  
  #question label:hover {
    background: #EBBB67;
  }
  
  #question input[type=radio]:checked + label {
    background: #CB8306;
    color: #FAFAFA;
  }
  
  #question {
    display: flex;
    flex-wrap: wrap;
  
  }
  
  
  @media screen and (min-width: 760px) {
      #question {
      flex-wrap: wrap;
      /* width: 100%; */
      font-size: 25px;
    }
  
    #question label {
      width: 90%;
      flex: 1 1 48%;
    }
  }


#quiz button {
  float: left;
  margin: 8px 0px 0px 8px;
  padding: 4px 8px;
  background: #9ACFCC;
  color: #00403C;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

#quiz button:hover {
  background: #36a39c;
  color: #FFF;
}

#quiz button:disabled {
  opacity: 0.5;
  background: #9ACFCC;
  color: #00403C;
  cursor: default;
}

#showAnswerText {
  transition: color 0.25s, background-color 0.25s;
  background-color: #e6e6e6;
    padding: 6px 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: .75em;
}
#showAnswerText:hover{
    color: rgba(204,0,0,0.9);
    cursor: pointer;
}