.soccertriviapanel {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  /* backdrop-filter: blur(2px);  This was the original background for the trivia panel.
  background-color: rgba(128, 128, 128, 0.5490196078);
  This background-color comes from the help of Gerard! */
}
.soccertriviapanel .questions {
  font-size: 40px;
  margin-bottom: 40px;
  font: Arial;
}
.soccertriviapanel .answers {
  font-size: 35px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: 5px;
  position: fixed;
  top: 375px;
  left: 775px;
  font: Arial;
}
.soccertriviapanel #score {
  font-size: 40px;
  color: darkblue;
  font-weight: bold;
}
.soccertriviapanel #timer {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-right: 5px;
}
.soccertriviapanel_dark {
  background-color: rgba(128, 128, 128, 0.5490196078);
}

body {
  background-color: gray;
  background-image: url("./Assets/soccerfield.jpg");
  background-position-y: 1900px;
  font-weight: bold;
}

h1 {
  text-align: center;
  font-size: 100px;
  font: Arial;
}

.soccertriviapanel {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  /* backdrop-filter: blur(2px);  This was the original background for the trivia panel. */
  background-color: rgba(128, 128, 128, 0.5490196078);
  /* This background-color comes from the help of Gerard! */
}

.questions {
  font-size: 40px;
  margin-bottom: 40px;
  font: Arial;
}

.answers {
  font-size: 35px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: 5px;
  position: fixed;
  top: 375px;
  left: 775px;
  font: Arial;
}

button {
  margin-right: 20px;
  margin-top: 250px;
  font-size: 20px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  font: Arial;
}

#score {
  font-size: 40px;
  color: darkblue;
  font-weight: bold;
}

/* added with help from Cody Jarrett! */
.answer-box {
  border: 5px solid black;
  padding: 10px;
}

.answer-box:hover {
  opacity: 0.5;
}

#timer {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-right: 5px;
}