/* Use variables to store theme colors. */
:root {
    --light-background-color:#fcf5d9;
    --medium-light-accent:#BDB7A2;
    --medium-dark-accent:#7D796B;
    --dark-foreground-color:#3D3B35;
    --light-accent:#E3DDC3;
}

/* Style and positioning rules */
/* Apply styling based on h3 (question text) and .answer-choice */
body {
    color:var(--dark-foreground-color);
    line-height:1.6;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin:0px;
    background-color: var(--light-background-color);
    font-size:18px;
}

header {
    background-color: var(--light-accent);
    display:flex;
    justify-content: space-between;
}

header p {
    font-size:20px;
    flex:0 0 auto;
    padding-left:2%;
    padding-right:2%;
}

.timer {
    width:fit-content;
}

#quiz-content {
    display:flex;
    flex-wrap: wrap;
}

aside, #save-score {
    background-color: var(--medium-light-accent);
    display:none;
    flex:0 1 100%;
    padding:0.7em;
}

#score-list {
    width:fit-content;
    margin-left:auto;
    margin-right: auto;
}

tr {
    display:flex;
    flex-wrap: nowrap;
    width:100%;
}

.initials {
    flex: 0 1 33%;
    padding-right:1em;
    text-align:right;
    width:4em;
}

.score {
    flex: 0 1 77%;
    text-align:left;
}

main {
    padding:0.7em;
    flex:0 1 100%
}

h1 {
    font-size:250%;
    text-align:center;
}

h2 {
    font-size:200%;
}

#welcome p {
    text-align: justify;
}

button {
    background-color: var(--medium-light-accent);
    color:var(--dark-foreground-color);
    border-radius:3px;
    font-size:16px;
    border:1px solid var(--dark-foreground-color);
    float:right;
}

#input-row {
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-around;
}

#submit-initials {
    background-color: var(--light-accent);
    color:var(--dark-foreground-color);
    border-radius:3px;
    font-size:16px;
    border:1px solid var(--dark-foreground-color);
}

.question {
    justify-content:center;
}

h3 {
    font-size:170%;
    text-align:justify;
}

.codeblock {
    background-color:var(--dark-foreground-color);
    margin-left:3%;
    margin-right:3%;
    padding:1em;
}

code {
    color:var(--light-accent);
    overflow:scroll;
    background-color: var(--dark-foreground-color);
    width:fit-content;
}

.answers {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style:none;
    margin-left:0px;
    padding-left:0px;
}

.answer-choice {
    flex: 0 1 80%;
    border: 2px solid var(--medium-dark-accent);
    border-radius:3px;
    background-color:var(--medium-light-accent);
    text-align:center;
    margin-bottom:1rem;
    transition: 0.5s box-shadow ease-in-out;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}

footer {
    margin-top:1em;
    background-color:var(--light-accent);
    font-size:16px;
    text-align: center;
    line-height:3;
}

.selected {
    background-color:var(--light-accent);
    border-color:var(--medium-light-accent);
    box-shadow:inset 0px 0px var(--medium-dark-accent), 0px 0px 15px var(--medium-dark-accent);
}

.answer-choice:hover {
    background-color:var(--light-accent);
}

button:active {
    background-color:var(--light-accent);
    transform:translate(2px, 2px);
}

@media screen and (min-width: 481px) {
    body {
        font-size: max(min(3vw, 28px), 1rem);
    }

    header p {
        font-size: max(min(3.2vw, 32px), 1.2rem);
    }

    button {
        font-size: max(min(3vw, 28px), 1rem);
        margin-top:1rem;
    }

    #quiz-content {
        flex-wrap:nowrap;
    }

    aside {
        flex:0 1 30%;
    }

    main {
        flex:0 1 100%;
    }

    footer {
        font-size: max(min(2vw, 16px), 16px);
    }

    .answer-choice {
        flex: 0 1 40%;
    }
}

@media screen and (min-width: 769px) {
    .answer-choice {
        flex: 0 1 22%;
    }
}