section h2 {
  margin: 0;
}
section:first-of-type {
  background-color: var(--special-yellow);
}
section:first-of-type h2 {
  font-size: 3em;
  color: black;
}
section:nth-of-type(2) {
  background-color: var(--near-white);
  padding: 1.5em 3%;
  margin-bottom: 3%;
}
section:nth-of-type(2) h2 {
  font-weight: bold;
  text-align: left;
  color: #3d3d3d;
  padding: 0.5em;
}
article {
  background-color: white;
  margin-bottom: 0;
}
div.quiz {
  width: 90%;
  margin: 1.5em auto;
  padding-top: 1em;
  text-align: center;
}
div.quiz h2.title span {
  font-size: 0.67em;
  font-weight: normal;
}
div.quiz p.instructions{
  text-align: left;
  padding: 0 0.67em;
}
div.card {
  border: 2px solid var(--near-black);
  padding: 0.5em 1.5em;
  border-radius: 10px;
}
h3.question {
  margin-bottom: 1.5em;
}
div.options button {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0.5em auto;
  padding: 0.67em;
  width: 100%;
}
div.card p.feedback {
  text-align: left;
  padding-top: 1em;
}
button.control {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.5em;
  padding: 0.5em 1em;
}
button.control, div.score {
  background-color: var(--near-white);
  color: var(--near-black);
  border: 3px solid var(--special-yellow);
  border-radius: 10px;
}
button.correct { background: #4CAF50; color: white; }
button.wrong { background: #f44336; color: white; }
@media only screen and (min-width : 768px) {
  article {
    width: 46%;
  }
  article:first-of-type {
    float: left;
    margin-left: 3%;
  }
  article:last-of-type {
    float: right;
    margin-right: 3%;
  }
}
/*@media only screen and (max-width : 767px) {
  section#quiz {
    width: 90%;
  }
}*/