* {
    font-size: 110%;
}
header, 
footer {
    padding: 2%;
    background: black;
}
/* text in top left corner */
h3 {
    cursor: pointer;
    display: inline;
    padding: 0.5%;
    border-radius: 5px;
    background: white;
}

h3:hover {
    background-color: grey;
}
/* purple main section */
section {
    text-align: center;
    background-color: #5900b3;
    color: white;
    padding: 1%;
    height: 75vh;
}
/* main header and text in dbl border */
h1,
#p {
    padding: 1%;
    border-radius: 5px;
}

h1 {
    font-size: 200%;
}
/* container outlined in dbl border */
#container {
    border: 5px double black;
    border-radius: 2px;
}
/* start btn */
#start {
    margin-top: 2%;
    padding: 1%;
    border-radius: 10px;
}
/* 'Next' btns */
.advance-btn {
    margin-top: 1%;
    cursor: pointer;
    padding: 1%;
    border-radius: 10px;
}

button:hover {
    background-color: black;
    color: white;
}

#start,
#advance {
    cursor: pointer;
}
/* answer choices */
li {
    list-style-type: lower-alpha;
    cursor: pointer;
}

li:hover {
    color: black;
}

.button {
    cursor: pointer;
}
/* list items for scores */
.score {
    list-style-type: none;
}

form {
    margin-bottom: 2%;
}
/* btn to submit initials with score */
#submit-btn {
    margin-left: 1%;
}
/* clear high scores and play again btn */
#clear-btn,
#play-again {
    margin-bottom: 1%;
}
/* message that displays at bottom of page */
#message {
    color: white;
}