/********************Universal styling ********************/
* {
  font-family: "lato";
}

:root {
  --teal: #3a5154;
  --lightblue: #a9bebc;
  --grey: #929aa2;
  --dark: #1d2625;
  --orange: #b7673c;
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* container box in the "container" */
#home {
  background-color: white;
}

.container {
  background-color: var(--lightblue);
  width: 50vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.container * > {
  width: 100%;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.quiz-box,
#end-box,
#highscore {
  padding-right: 5rem;
  padding-left: 5rem;
  padding-bottom: 5rem;
  background-color: white;
  }

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.justify-centre {
  justify-content: center;
}

.text-centre {
  text-align: center;
}

/********************Buttons********************/
.btn,
#username {
  margin: auto;
  font-size: 1.5rem;
  padding: 1rem 0;
  width: 20rem;
  text-align: center;
  margin-bottom: 1rem;
  text-decoration: none;
  color: black;
  background-color: var(--lightblue);
  font-weight: bold;
}

.btn:hover,
.choice-box:hover {
  cursor: pointer;
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

#saveScoreBttn,
#play-again,
#viewScoreBoardBttn,
#playAgainBttn,
#clearScores {
  border: none;
}

/********************Start page styling ********************/
h1 {
  margin-top: 1rem;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1rem;
}

h2,
p {
  font-size: 1.5rem;
  text-align: center;
  padding: 5%;
}

/********************Questions page styling ********************/
.choice-box {
  display: flex;
  width: 100%;
  font-size: 1.3rem;
  margin-top: 1rem;
  background-color: var(--lightblue);
  font-weight: bold;
  padding: 1rem 0;
  padding-left: 1rem;
}

/********************Quiz-end page styling ********************/
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#username {
  background-color: white;
}

#title,
#finalScore {
  font-size: 2rem;
}

#highscoresList {
  list-style: none;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}

.current-score {
  display: flex;
  flex-direction: row;
  
}

#results-box {
  font-size: 2.5rem;
}