body {
  background-color: #F4F3EE;
  font-family: "Poppins", sans-serif;
}

h1 {
  color: #7B287D;
  text-align: center;
}

#ques {
  color: #7B287D;
  position: absolute;
  left: 15vw;
  top: 15vh;
  font-size: 2em;
  border: 5px solid #E59500;
  /* background-color: #ffbc0a; */
  border-radius: 50%;
  padding: 20px;
  height: 75px;
  width: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pointsbox {
  color: #7B287D;
  position: absolute;
  right: 15vw;
  top: 15vh;
  font-size: 2em;
  border: 5px solid #E59500;
  border-radius: 50%;
  padding: 20px;
  word-wrap: normal;
  text-align: center;
  height: 75px;
  width: 75px;
}

.ring {
  height: 50vh;
  width: 50vw;
  border-radius: 50%;
  border: 20px solid #7B287D;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.ringCorrect {
  border: 20px solid #04A777;
}
.ringIncorrect {
  border: 20px solid #ED1C24;
}
.ringFinish {
  border: 20px solid #c200fb;
  border-radius: 50%;
  background-color: #ffbc0a;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#questionbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #7B287D;
  padding: 25px;
  border-radius: 50%;
  background-color: #E59500;
  max-width: 25%;
  text-align: center;
}

/* move answer boxes to top, right, bottom, left */
#answer1 {
  position: absolute;
  left: 50vw;
  top: 25vh;
  transform: translate(-50%, -50%);
}

#answer2 {
  position: absolute;
  left: 75vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

#answer3 {
  position: absolute;
  left: 50vw;
  top: 75vh;
  transform: translate(-50%, -50%);
}

#answer4 {
  position: absolute;
  left: 25vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

.answers {
  border: 5px solid #7B287D;
  padding: 20px;
  border-radius: 50%;
  background-color: #E59500;
  width: 15%;
}
.answers:hover {
  filter: drop-shadow(0 0 0.75rem #7B287D);
}

.correct {
  background-color: #04A777;
  font-size: x-large;
  min-width: none;
  filter: drop-shadow(0 0 0.75rem #04A777);
}

.incorrect {
  background-color: #ED1C24;
  filter: drop-shadow(0 0 0.75rem #ED1C24);
}

.wait {
  pointer-events: none;
}

/* Div with final score in it */
#finish {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* border: 5px solid #c200fb; */
  padding: 25px;
  border-radius: 50%;
  /* background-color: #ffbc0a; */
  max-width: 45%;
  text-align: center;
  font-size: 4em;
}

/* The ring when the game is over */
.ringFinish {
  height: 69%;
  width: 48%;
  border: 20px solid #7B287D;
  border-radius: 50%;
  background-color: #E59500;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#replay {
  font-size: xx-large;
  background-color: #F4F3EE;
  /* color: #f6e8ea; */
  font-family: "Poppins", sans-serif;
}/*# sourceMappingURL=styles.css.map */