html {
  height: 100%;
  width: 100%;
}

body {
  margin: 20px;
  padding: 20px;
  font-family: "Kantumruy Pro", sans-serif;
  font-size: 22px;
  color: black;
  background-color: #ADD8E6;
  text-align: center;
}

h1 {
  color: #333;
  font-size: 36px;
  margin: 20px;
}

h2 {
      color: #333;
      font-size: 30px;
      margin: 20px;
    }

    p {
      color: #333;
    }


/* math fact box*/
#fact-box1{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid  #6496ed;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* english fact box */
#fact-box2{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid  #dc143c;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* science fact box */
#fact-box3{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid  #90ee90;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* history fact box */
#fact-box4{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid  #ffa500;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* arts fact box */
#fact-box5{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid  #9370cb;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* suprise fact box */
#fact-box6{
  width: auto;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 2px solid #ffc0cb;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}

/* quizbox*/
#quiz-box{
  width: auto;
  height: 450px;
  min-width: 300px;
  max-width: 60vw;
  padding: 25px;
  border: 3px solid #483D8B;
  margin: 20px auto;
  background-color: white;
  text-align: center;
  word-break: break-word;
  display: none;
}
.button{ 
      width: 180px;
      height: 70px;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 20px 25px;
      cursor: pointer;
      transition-duration: 0.2s;
      border-radius: 4px;
      background-color: white;
      color: black;
      border: 2px solid black;
    }

  .math{ 
      background-color: white;
      color: black;
  border: 2px solid black
    }
 .math:hover {
      background-color: #6496ed;
      color: white;
    }

   .english{
      background-color: white;
      color: black;
      border: 2px solid black;
    }
.english:hover {
      background-color: #dc143c;
      color: white;
    }

    .science{
      background-color: white;
      color: black;
      border: 2px solid black;
      }
.science:hover{
      background-color: #90ee90;
      color: white;
    }

    .history{
      background-color: white;
      color: black;
      border: 2px solid black;
    }
.history:hover{
  background-color: #ffa500;
  color: white;
    }

    .arts{
      background-color: white;
      color: black;
      border: 2px solid black;
    }
.arts:hover{
      background-color: #9370db;
      color: white;
    }

    .suprise{
      background-color: white;
      color: black;
      border: 2px solid black;
    }
.suprise:hover{
      background-color: #ffc0cb;
  color: white;
    }

    /* Quiz buttons */
.begin{
  background-color: white;
  color: black;
  border: 2px solid black;
}
.begin:hover{
  background-color: #D3D3D3;
  color: black;
}

.choice1:hover, .choice2:hover, .choice3:hover {
  background-color: #D3D3D3;
  color: black;
}

.choices{
   display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.restart:hover{
background-color: #D3D3D3;
  color: black;
}