* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-color: #fce138;
    --secondary-color: #024e76;
    --tertiary-color: #39a6b2;
}
body { 
    color: var(--secondary-color);
    font-family: Helvetica, Arial, sans-serif;
  }
  /* Start of Header Style with High Score button and Timer */
  header .container {
      padding: 20px 35px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
  }
  /* View High Score Button */
  header button {
    font-size: 20px;
    color: var(--tertiary-color);
}
  .score-button {
    font-size: 20px;
    color: white;
    padding: 1vw;
    /* border: 5px solid greenyellow; */
    border-radius: 15px;
}
  /* Timer */
  header .timer{
    display: flex;
    align-content: center;
  }
  header h4 {
      display: flex;
      font-size: 20px;
      color: var(--secondary-color);
      align-items: center;
      text-align: right;
      align-content: center;
  }

  header h3 {
    align-content: center;
}

  /* End Style for Header */
  section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    padding: 100px 35px;
   }

   .quiz-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

   }

   h1 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 3vw;
    padding-bottom: 3vw;
  }

  p {
    text-align: center;
    font-size: 25px;
    padding: 2vw 15vw 4vw 15vw;
  }

  .quiz-intro {
    display: flex; /* adjust to table for quiz questions */
    padding: 0vw 10vw;
    justify-content: center;
    width: 100%;
    /* border: 3px solid green; */
    /* potentially add padding: 0.3vw 35vw 0.3vw 15vw; */
  }

  .quiz-answer-wrapper {
    display: table; /* adjust to table for quiz questions */
    justify-content: center;
    align-items: center;
    width: 100%;
    /* border: 3px solid green; */
    /* potentially add padding: 0.3vw 35vw 0.3vw 15vw; */
  }

  .quiz-start {
    padding: 1vw 2vw 1vw 2vw;
    font-size: 25px;
    border-radius: 15px;
    color: white;
    background-color: var(--secondary-color);
}

  .quiz-answers {
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* padding: .03vw 3vw .03vw 7vw; adjust for quiz questions */
      font-size: 25px;
      /* border: 3px solid purple; */
      border-radius: 15px;
      list-style: none;
      /* list-style-position: inside; /* adjust for quiz questions! */
      width: 30vw;
      margin: auto;
  }

  .quiz-answer-option {
    /* border: 5px solid red; */
    border-radius: 15px;
    margin: 0vw 0vw 1vw 0vw;
    list-style: none;
  }

  .btn {
    color: white;
  }

  button {
    font-size: 25px;
    color: white;
    padding: 1vw;
    border-radius: 15px;
    background-color: var(--secondary-color);
    margin: 0.5vw;
    text-align: left;
  }
  
  .spacer {
    justify-content: left;
  }

  .qualifier {
    display: flex;
    text-align: center;
    font-size: 25px;
    font-style: italic;
    color: grey;
    border-top: 2px solid gray;
    padding-top: 2vw;
  }

  form {
    display: flex;
    font-size: 20px;
    justify-content: space-around;
    align-items: center;
    padding-left: 15vw;
    padding-right: 25vw;
  }

  form input{
  border: 1px solid var(--secondary-color);
  display: block;
  padding: 10px 15px;
  font-size: 16px;
  color: var(--secondary-color);
  width: 25%;
  border-radius: 10 px;
  background-color: rgba(255,255,255, 0.75);
  }

  .high-scores {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left:15vw;
    padding-right: 25vw;
  }
 /*  .quiz-answer {
    font-size: 25px;
    border: none;
    background-color: var(--secondary-color);
    color: white;
    padding: 10vw 7vw 10vw 7vw;
  } */

  .correctness {
    justify-content: space-around;
  }

  ul {
    list-style: none
  }

  li {
    border: 1px solid var(--secondary-color);
    background-color: lightblue;
    font-size: 20px;
    padding: 10px 15px;
    margin: 2vw 25vw;

  }