* {
    box-sizing: border-box;
    font-family:'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 70;
    line-height: 1.4;
}

:root {
    --primary: rgb(26, 26, 26);
    --secondary: rgb(240, 182, 74);
    --tertiary: rgb(94, 180, 219);
    --quaternary: rgb(36, 36, 36);
    --correctcolor: rgb(84, 163, 20);
    --wrongcolor: rgb(218, 40, 40);
}

body {
    background: var(--primary);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    color: var(--tertiary);
}

/* header styles start */
header {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 5%;
}

header div {
    color: var(--secondary);
    display: inline;
}
/* header styles end */

/* main page styles start */
.container {
    text-align: center;
    max-width: 80%;
}

h2 {
    color: var(--secondary);
    font-size: 25px;
}

span {
    color: white;
}
/* main page styles end */

/* question/answer styles start */
.btn-grid {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
    margin: 20px auto;
}

.btn {
    background: var(--primary);
    color: var(--tertiary);
    border: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    margin: 3px;
}

.nav-btn {
    color: rgb(211, 105, 211);
    padding: 5px;
    margin: 20px 30px;
}

.btn:hover {
    background: var(--quaternary);
}

.correct {
    color: var(--correctcolor);
}

.wrong {
    color: var(--wrongcolor);
}
/* question/answer styles end */

/* results form styles start */
input {
    background: var(--quaternary);
    color: var(--tertiary);
    border: 0;
    border-radius: 5px;
}

#score {
    color: var(--secondary);
}
/* results form styles end */

/* high scores styles start */
#high-scores-list {
    list-style: none;
    padding: 0;
}
/* high scores styles end */

/* utility styles */
.hide {
    display: none;
}