/* root colours */
:root {
  --blue: #172444;
  --rust: #faa71b;
  --offWhite: #fdfff9;
  --green: #56b74a;
}

* {
  margin: 0rem;
  padding: 0rem;
  font-family: "Poppins", sans-serif;
}

/* element selectors */
body {
  background-color: var(--blue);
}

header {
  display: flex;
  text-align: center;
  font-size: 1.8rem;
  background-color: grey;
  justify-content: center;
}

main {
  display: flex;
  flex-direction: column;
  align-content: center;
}

header h1 {
  background-color: var(--rust);
  border-radius: 1rem;
  width: fit-content;
  align-self: center;
  margin: 0.625rem;
}

/* class selectors */
.quizArea {
  padding: 1.25rem;
  margin: 1.875rem;
  margin-top: 0.625rem;
  width: 37.5rem;
  height: 40rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  background-color: var(--rust);
  border-radius: 1rem;
}

.timer {
  height: 3rem;
  font-size: 3rem;
  padding: 0.8rem;
  align-self: flex-end;
}

.question {
  height: 25rem;
  font-size: 1.5rem;
}

button.answerButton {
  font-size: 1.4rem;
  margin: 1rem;
}
.mainButtons {
  display: flex;
  width: 25rem;
  justify-content: space-between;
  align-self: center;
}

button.startBtn,
button.highScoreBtn {
  height: 3rem;
  border-radius: 0.3rem;
  border-width: 0.1rem;
  font-size: 1.4rem;
  text-align: center;
  padding: 0.5rem;
}

.highScores {
  background-color: var(--blue);
  padding: 1.25rem;
  margin: 1.875rem;
  margin-top: -1.25rem;
  width: 37.5rem;
  border-radius: 1rem;
  list-style: none;
  align-self: center;
  font-size: 1.4rem;
}

.rightWrong {
  font-size: 3rem;
  align-self: center;
}