/*
    The CSS defines the layout and styling for the quiz application.
    It utilizes Flexbox for centering content both horizontally and vertically on the page.
    The styling includes specific settings for buttons, quiz content, and background image.
*/
body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    font-family: 'Courier New', Courier, monospace;
    background-image: url(img/background.jpeg);
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Ensure the background covers the entire area */
}

#next-btn, #restart-btn {
    display: none; /* Hide these buttons initially */
}

#answer-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
}

/* Quiz Score Section */
#score-text {
    display: none; /* Hide the score section initially */
    font-size: 1.5rem;
    padding: 1rem;
}

footer {
    color: whitesmoke;
}