header {
  font: bold 15px/100% Times, serif;
  background: #111;
  color: #c00;
  text-transform: uppercase;
  text-align: center;
}
section p {
  font: bold 64px/100% Times, serif;
  background: #444;
  border: #999 2px solid;
  color: #999;
  text-align: center;
  padding: 10px;
  margin: 10px;
  width: 300px;
}
#demo{
  text-align: center;
}
/* (A) WRAPPER */
#quizWrap {
  max-width: 450px;
  margin: 0 auto;
}

/* (B) QUESTION */
#quizQn {
  padding: 20px;
  background: #333;
  color: orange;
  font-size: 24px;
  border-radius: 10px;
  border: 1px solid #777;
}

/* (C) ANSWERS */
#quizAns {
  margin: 10px 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}
#quizAns input[type=radio] { display: none; }
#quizAns label {
  background: #444;
  border: 1px solid #666;
  border-radius: 10px;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
#quizAns label.correct {
  background: #d8ffc4;
  border: 1px solid #60a03f;
}
#quizAns label.wrong {
  background: #ffe8e8;
  border: 1px solid #c78181;
}

/* (D) BODY... DOES NOT QUITE MATTER */
html, body {
  background: #111; 
  font-family: arial, sans-serif;
  color: #999;
}
.btnSuccess {
 background: #77d42a;
  border: 1px solid #0aaa0a;   
}
.btnDanger {
    color: white;
     background: red;
  border: 1px solid #c78181;
}
.hidden { display:none; }
.display { display:block; }