/* Table of Contents
S1. General
S2. Header
S3. Start Screen
S4. Code Quiz
S5. End Screen
S6. High Scores
*/

/* S1. General */
:root {
    --color1: #351c75;
    --color2: #bd60e7;
    --color3: #9e9e9e;
    --color4: #d9d3e9;
}

body {
    font-family: Helvetica, Arial, sans-serif;
}

button {
    border: none;
    font-size: 20px;
    padding: 13px 25px;
    color: white;
    background-color: var(--color1);
    border-radius: 10px;
}

button:hover {
    background-color: var(--color2);
    cursor: pointer;
}

button:active {
    box-shadow: 0 0 3px black;
}

#main-content {
    font-size: 20px;
    line-height: 1.5;
}

/* S2. Header */
header {
    display: flex;
    justify-content: space-between;
    margin: 3% 5%;
    font-size: 20px;
}

#high-scores-text {
    color: var(--color2);
}

#high-scores:hover {
    cursor: pointer;
}

/* S3. Start Screen */
.start-screen-main-text {
    text-align: center;
}

.start-screen-main-content {
    text-align: center;
    margin: 0 20%;
}

.start-screen-main-content button {
    display: block;
    margin: 5% auto;
}

/* S4. Code Quiz */
.quiz-loop-main-text {
    margin: 0 10% 0 20%;
}

.quiz-loop-main-content {
    margin: 0 10% 0 20%;
}

.answers-list {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 0;
}

.answers-list button {
    display: block;
    width: 100%;
    text-align: left;
    margin: 10px 0;
}

.correct-display {
    border-top: 1px solid var(--color3);
    color: var(--color3);
    font-style: italic;
    margin: 0 10% 0 20%;
}

/* S5. End Screen */
.end-screen-main-text {
    margin: 0 20%;
}

.end-screen-main-content {
    margin: 0 20%;
    font-size: 20px;
}

.end-screen-main-content p {
    margin: 10px 0 0 0;
}

#end-form {
    display: flex;
    margin-top: 5px;
    margin-bottom: 20px;
}

.initials {
    margin: 0 10px;

    flex-grow: 1;
    font-size: 16px;
}

#submit-score {
    padding: 7px 15px;
}

/* S6. High Scores */
.high-scores-main-text {
    margin: 0 20%;
}

.high-scores-main-content {
    margin: 0 20%;
}

#high-scores-list {
    background-color: var(--color4);
}

#high-scores-buttons {
    display: flex;
    justify-content: left;
}

#high-scores-buttons button {
    padding: 7px 15px;
    margin-right: 10px;
}