/* Formatting to remove default button behavior of underlining and turning text purple */
a, a:hover, a:active, a:focus {
    text-decoration: none;
    color: white;
}

/* Formatting for intro message */
#Intro {
    display: flex;
    text-align: center;
    font-weight: bolder;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
    background-color: maroon;
    color: white;
    border: black solid 5px;
    border-radius: 10px;
} 

/* Formatting for start button */
#Start {
    display: flex;
    padding: 0px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    font-size: 30px;
    background-color: lightgrey;
    border:  black solid 5px;
    border-radius: 10px;
}

#ListOfScores {
    padding: 0px 0px 0px 0px;
}

/* Formatting for high scores */
#HiScores {
    display: flex;
    padding: 2px 2px 2px 2px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    background-color: lightgrey;
    border: black solid 5px;
    border-radius: 10px;
    display: flex;
    font-size: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: fit-content;
    margin-bottom: 5px;
}

/* Formatting for countdown element */
#Countdown {
    display: flex;
    border: 0px;
    margin: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 5px;
}

/* Formatting for all answer options */
ul {
    text-decoration: none;
    list-style-type: none;
    margin: 0;
    max-width: 200px;
    left: 50%;
    right: 50%;
    justify-content: center;
    font-size: 24px;
}

/* Formatting for individual answer options */
ul li {
    text-decoration: none;
    background-color: darkgreen;
    text-align: center;
    margin-bottom: 15px;
    padding: 10px 10px 10px 10px;
    border: 5px 5px 5px 5px;
    width: 200px;
    margin-left: 35%;
    margin-right: 35%;
    border-radius: 10px;
}

/* Formatting for whole question element */
#Q1, #Q2, #Q3, #Q4, #Q5 {
    text-decoration: none;
    display: none;
    border: black solid 5px;
    border-radius: 10px;
    margin-top: 10%;
    margin-left: 25%;
    margin-right: 25%;
    background: navy;
    color: white;
}

/* Formatting for game over screen when time = 0 or all questions answered */
#GameOver {
    display: none;
    border: black solid 5px;
    border-radius: 10px;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 10px;
    color: red;
    font-size: 50px;
    font-weight: bolder;
}

/* Formatting for current round score display */
#YourScore {
    display: none;
    text-align: center;
    border: black solid 5px;
    border-radius: 10px;
    margin-left: 10%;
    margin-right: 10%;
    color: black;
    font-size: 30px;
    font-weight: bolder;
}

/* Formatting for all h1 elements */
h1 {
    text-align: center;
}

/* Formatting for reload button */
#Reload {
    display: none;
    padding: 0px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12%;
    font-size: 30px;
    background-color: lightgrey;
    border:  black solid 5px;
    border-radius: 10px;
}