@font-face{
     font-family:'Roboto';
     src:url('fonts/Roboto-Light.ttf');
     font-weight:normal;
}
body {
  font-family: 'roboto-light', sans-serif;
  background: #001f3f;
  display: flex;
  justify-content: center;
  
  height: 100vh;
  color:lightgray;
}

.quiz-container {
  background: #00336688;
  margin: 5px;
  padding:10px;
  width: 70%;
  border-radius: 10px;   
}
.options{
  align-content:center;
  display:flex;
}
 
h1 {
  text-align: center;
}

#options button { 
  flex-direction:center;
  display: block;
  width: 90%;
  margin: 8px 0;
  padding: 10px;
  cursor: pointer;   
  font-size:1.1em; 
  }
  button:disabled{
      color:#eee;
      background-color:gray;
  }
/* 
.correct {
  
  color:green;
  
  
}

.wrong {
  color: red;
}
*/
.hidden {
  display: none;
}
#question{
   font-size:1.1em;
}
#explanation{
    font-style:italic;
    padding:10px;
}
#next-btn, #explain-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
}
#code{
  font-family:'Courier-new', 'courier';
  font-size:1em; 
  margin-left:15px;
}
@media only screen and (max-width:480px){
.quiz-container{
   width:90%;
}
}
/* Correct Answer Styling */
.correct::before {
    content: "\2714"; /* Unicode for Checkmark */
    color: green;
    position: relative;
    left: -10px;
    font-weight: bold;
}

/* Incorrect Answer Styling */
.wrong::before {
    content: "\2718"; /* Unicode for Heavy Cross */
    color: red;
    position: relative;
    left: 0;
    font-weight: bold;
}