/*---------------------------------------------------*/
/*CSS variables*/
:root {
--lime:  rgb(166, 255, 0);
--blue:  rgb(0, 80, 201); 
--volt:  rgb(229, 255, 0);
--light-blue:  rgb(0, 255, 234); 

}
/*---------------------------------------------------*/

* { 
  font-family: monospace, Cambria, Times, serif; 
} 

.quiz, 
.scores { 
  margin: 50px auto 0 auto; 
  max-width: 400px; 
} 

#title { 
  color: var(--lime);
  background-color: black;
  text-align: center; 
} 

.box1 { 
  border: 5px dashed; 
  top: 50%; 
  left: 50%; 
  height: 600px;
  width: 50%; 
  margin: auto;
  padding: 10px; 
} 

p { 
  margin: 15px 15px; 
  font-size: 18px;
} 

.description { 
  text-align: center; 
} 

.scoresHeader { 
  top: 15px; 
  left: 15px; 
} 

.timer { 
  top: 5px; 
  right: 5px; 
  background-color: var(--volt);
  border: 2px solid; 
  font-weight: bold;
  text-align: center; 
} 

button { 
  display: inline-block; 
  margin: 10px; 
  cursor: pointer; 
  color:  var(--lime);
  font-size: 16px;
  font-weight: bold;
  background-color: var(--blue);
  border-radius: 5px; 
  border: 0; 
  padding: 20px; 
  border: 1px solid black;
  box-shadow: 0 9px #999;
} 

button:hover { 
  background-color: var(--light-blue);
  color:  rgb(0, 0, 0); 
  border: 2px solid black;

} 
button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
} 

.options button { 
  display: block; 
} 

input[type="text"] { 
  font-size: 100%; 
} 

.hide { 
  display: none; 
} 

.feedback { 
  font-style: bold; 
  font-size: 120%; 
  margin-top: 20px; 
  padding-top: 15px; 
  color: #fff; 
  border-top: 2px solid #f0ecf3; 
} 

ol { 
  padding-left: 15px; 
  max-height: 600px; 
  overflow: auto; 
} 

li { 
  padding: 5px; 
} 

li:nth-child(odd) { 
  background-color: var(--volt);
} 

li:nth-child(even) { 
  background-color: var(--light-blue);
} 

/*MEDIA ENQUIRIES.................................*/ 

@media screen and (max-width: 768px) { 
  .box1 { 
      width: 80%; 
  } 
} 

@media screen and (max-width: 575px) { 
  .box1 { 
      width: 90%; 
  } 

  .quiz, 
  .scores { 
      max-width: 90%; 
  } 
}