body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
  color: white;
}

main {
  margin: 20% 20% 20% 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: center;
}

#answer-button-container {
  margin-top: 20px;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.answer-buttons {
  display: none;
  padding: 7px 7px;
  background-color: blue;
}

button {
  margin-top: 20px;
  border: none;
  background-color: red;
  color: white;
  padding: 7px 7px;
  border-radius: 5px;
  transition: 0.3s all;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 5px white;
}

button:focus {
  outline: none;
}

li {
  background-color: rgb(2, 0, 36);
  background: linear-gradient(
    284deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(224, 57, 185, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  width: 300px;
  color: black;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  margin: 10px;
  border-radius: 7px;
}

#correct-incorrect {
  margin-top: 20px;
}

#timer {
  width: 100px;
  height: 100px;
}

aside {
  position: absolute;
  top: 10px;
  left: 10px;
}