/* This spaces out the View high scores and Timer */
header {
    display: flex;
    justify-content: space-between;
}
/* Increases font size and bolds the Timer in upper right hand corner */
.timer {
    font-size: 20px;
    font-weight: bold;
}
/* Displays main section in middle of the page, has them in a column and centered */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh;
}
/* Slightly increases size of font in paragraph element and aligns each
line break to have them centered */
p {
    font-size: 1.3rem;
    text-align: center;
}
/* This changes the color of "penalize" in main paragraph */
p span {
    color: #f44336;
}
/* Button for Start Quiz */
.start-quiz {
    display: block;
    background-color: rebeccapurple;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
/* Styles for question */
h2 {
    font-size: 32px;
    display: flex;
    justify-content: center;
}
/* Moves the question container to middle of page */
#question-container {
    margin-top: -320px;
}
/* Styles for the choices for question */
.choices {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
/* Styles for the choices button */
.choices button {
    margin-bottom: 10px;
    font-size: 1rem;
    padding: 10px;
    width: 25%;
    color: white;
    background-color: rebeccapurple;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Hovers over the choices and turns pink */
.choices button:hover {
    background-color: pink;
}
/* Correct or Wrong message */
.message {
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin-top: 50px;
}