:root {
  --purple: rgb(106, 8, 106);
}

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* a tag relates to the "View Highscores" button in the top-left */
a {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--purple);
  text-decoration: none;
}
a:hover {
  color: brown;
}

a:active {
  color: blue;
}

/* header is the title of the quiz and the questions themselves.  */
header {
  font-weight: 600;
}

footer {
  display: flex;
  justify-content: center;
}

/* this is the answer button formatting  */
div button {
  margin: 2px;
  width: 100%;
}

/* formatting once user name inputted  */
.username {
  display: flex;
  justify-content: space-around;
}

.hidden {
  display: none;
}

/* formats the contents of entire page  */
.container {
  display: flex;
  justify-content: space-between;
}

/* quiz is the element that contains the quiz question and the answer options.  */
.quiz {
  width: 40%;
  text-align: center;
  margin-top: 2rem;
}

/* defines button styles */
.button {
  background-color: blueviolet;
  color: white;
  border-radius: 9%;
  border-color: blueviolet;
}

.button:hover {
  opacity: 70%;
}

/* pop-up when answer selected - formatting  */
.confirmation {
  color: grey;
  text-align: center;
}

/* formats answers to left side  */
.answers {
  display: flex;
  padding: 10px;
}

/* this styles the layout of the answer options  */
#answers2,
#answers3,
#answers4,
#answers5,
#answers1 {
  padding: 10px;
  flex-basis: 6rem;
  flex-direction: column;
  justify-content: flex-start;
}