* {
  font-family: "Mukta Malar", sans-serif;
  margin-top: 10px;
}

body {
  background-color: #8ecae6;
}

img {
  max-width: 35px;
  margin: 12px;
}

.start-page {
  margin: 50px;
  padding: 10px;
  background-color: #023047;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
  border-radius: 15px;
  box-shadow: 5px 8px 12px rgb(255, 255, 255);
}

.card-header {
  text-align: center;
  color: #ffb703;
  font-size: 40px;
  padding: 20px;
}

.card-info {
  font-family: "Baloo 2", sans-serif;
  text-align: center;
  color: white;
  padding: 20px;
  font-size: 20px;
  display: block;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 25px;
}

.start-page-btns, .history-btns, .results {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.start-button,
.done,
#submit,
.back {
  background-color: #ffb703;
  color: white;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: 2px solid white;
  border-radius: 15px;
}

.start-button:hover,
.done:hover,
#submit:hover,
.back:hover {
  color: #ffb703;
  background-color: white;
  border: 2px solid #ffb703;
}

.clear {
    background-color: #023047;
    color: white;
    margin: 10px;
    padding: 10px;
    font-size: 20px;
    border: 2px solid white;
    border-radius: 15px; 
}

.clear:hover {
    background-color: white;
    border-color: #023047;
    color: #023047;
}

#view-scores {
  margin: 10px;
  padding: 10px;
  text-decoration: none;
  color: white;
  background-color: #fb8500;
  border: 2px solid white;
  border-radius: 15px;
  font-size: 20px;
}

#view-scores:hover {
  color: #fb8500;
  background-color: white;
  border: 2px solid #fb8500;
}

.score-container {
    font-family: "Baloo 2", sans-serif;
    text-align: center;
    color: white;
    background-color: #219ebc;
    font-size: 40px;
    margin-top: 20px;
    margin-right: 150px;
    margin-left: 150px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 5px 8px 12px rgb(255, 255, 255);
}

.score-list {
    list-style: none;
    font-size: 20px;
    color: #023047;
    padding-top: 25px;
} 

.question-container {
  background-color: #219ebc;
  color: white;
  margin: 20px;
  margin-left: 150px;
  margin-right: 150px;
  padding: 20px;
  height: 50vh;
  border-radius: 15px;
  box-shadow: 5px 8px 12px rgb(255, 255, 255);
}

.question {
  text-align: center;
  font-size: 30px;
}

.option1,
.option2,
.option3,
.option4 {
  font-size: 25px;
  padding-left: 35px;
}

.correct,
.wrong {
  text-align: center;
  font-style: italic;
  font-size: 18px;
  color: white;
}

.final-result {
  background-color: #023047;
  color: white;
  font-size: 30px;
  margin-top: 20px;
  margin-left: 150px;
  margin-right: 150px;
  padding: 20px;
  height: 50vh;
  border-radius: 15px;
  box-shadow: 5px 8px 12px rgb(255, 255, 255);
}

.final-result h3 {
    font-family: "Baloo 2", sans-serif;
    color:#ffb703;
}

#initials-form input {
    font-family: "Baloo 2", sans-serif;
    padding: 10px;
    font-size: 20px;
    height: 2vh;
}

.score-container,
.question-container,
.final-result,
.score-list,
.correct,
.wrong,
.done,
.back,
.clear {
  display: none;
}

.start-button:hover,
#view-scores:hover,
#submit,
.done,
.back:hover,
.clear:hover,
.option1:hover,
.option2:hover,
.option3:hover,
.option4:hover {
  cursor: pointer;
}

.option1:hover,
.option2:hover,
.option3:hover,
.option4:hover {
  color: black;
}