* {
    box-sizing: border-box;
    transition: color 150ms, background-color 150ms, border-color 150ms;
}

/* html + body + container */

html {
    height: 100%;
    font-size: min(21px, 3vw, 2.7vh);
    font-family: Nunito, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);

    --bg-color: #ffffff;
    --fg-color: #000000;
    --button-bg-color: #000000;
    --button-fg-color: #ffffff;
    --sub-color: #757575;
    
    --button-hover-bg-color: #4527a0;
    --input-focus-color: #673ab7;
    --button-focus-color: #7e57c2;
    --link-color: #4527a0;
    
    --correct-color: #13ac00;
    --correct-color-dark: #057a00;
    --fail-color: #d50000;
    --fail-color-dark: #9b0000;
    --short-color: #e65100;
}

html[theme="dark"] {
    --bg-color: #212121;
    --fg-color: #ffffff;
    --button-bg-color: #bdbdbd;
    --button-fg-color: #000000;
    --sub-color: #9e9e9e;
    
    --button-hover-bg-color: #b39ddb;
    --input-focus-color: #9575cd;
    --button-focus-color: #7e57c2;
    --link-color: #b39ddb;
    
    --correct-color: #64dd17;
    --correct-color-dark: #1faa00;
    --fail-color: #e40022;
    --fail-color-dark: #c4001d;
    --short-color: #f9a825;
}

body {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: clamp(10px, 10vh - 70px, 30px);
    padding-bottom: clamp(10px, 10vh - 70px, 30px);
}

#container {
    display: grid;
    width: 100%;
    max-width: 1000px;
    height: 100%;
    min-height: 500px;
    margin: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 3fr 1fr;
}

/* screens */

.screen {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    display: none;
    position: relative;
    z-index: -1;
    width: 100%;
    align-items: center;
    align-self: start;
}

#start {
    display: grid;
    z-index: 1;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 3ex;
    padding-top: 3ex;
    padding-bottom: 3ex;
}

#game {
    grid-template-rows: repeat(8, auto);
    grid-template-columns: auto 1fr 25% 25%;
    grid-row-gap: 2ex;
    padding-top: 3.5ex;
    padding-bottom: 3.5ex;
}

#results {
    grid-template-rows: auto 15ex repeat(3, auto);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 3.5ex;
    padding-top: 3.5ex;
    padding-bottom: 3.5ex;
}

#fuck-war {
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 6.5ex;
    padding-top: 6.5ex;
    padding-bottom: 6.5ex;
}

/* header */

#header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    font-size: 2rem;

    color: white;
    background-image: url("ua.png");
    background-size: contain;
    text-shadow: 0 0 0.33rem black;
}

#header-a {
    margin-left: 0.04rem;
    margin-right: -0.02rem;
}

#header-t {
    margin-left: 0.08rem;
    margin-right: 0.08rem;
}

#header-e {
    margin-right: 0.02rem;
}

#header:focus {
    outline: 0;
}

/* footer */

#footer {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    align-self: center;
}

#theme-button {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

/* links */

a, a:visited {
    color: var(--link-color);
}

/* text inputs + selects */

input[type=text], select {
    background: var(--bg-color);
    color: var(--fg-color);
    border: 3px solid var(--fg-color);
    border-radius: 5px;
    padding: 5px;
    font: inherit;
}

input[type=text]:focus-visible, select:focus-visible {
    outline: 0;
    border-color: var(--input-focus-color);
}

#lg-username:disabled, select:disabled {
    opacity: 0.7;
}

input[type=text].answer-box {
    margin-left: 5px;
    margin-right: 5px;
    backface-visibility: hidden;
}

/* buttons */

button {
    background: var(--button-bg-color);
    color: var(--button-fg-color);
    border: 3px solid var(--button-bg-color);
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
    font: inherit;
}

@media (hover: hover) {
    button:enabled:hover {
        outline: 0;
        background: var(--button-hover-bg-color);
        border-color: var(--button-hover-bg-color);
    }
}

button:focus-visible {
    outline: 0;
    border-color: var(--button-focus-color);
}

button:disabled {
    background: var(--bg-color);
    color: var(--fg-color);
}

#start-button {
    margin-top: 3ex;
    margin-bottom: 1ex;
}

#give-up-button, #submit-button {
    margin-top: 2ex;
    margin-bottom: 2ex;
}

/* labels */

label {
    color: var(--fg-color);
    padding-left: 5px;
    padding-right: 5px;
}

#fuck-war-links {
    margin-bottom: 1ex;
}

#start-feed {
    color: var(--fail-color);
}

#round {
    font-size: 1.2rem;
    align-self: end;
}

#whats-the-song {
    margin-top: -0.6ex;
    margin-bottom: -0.6ex;
}

#question {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 1ex;
}

#final-score-feed {
    font-size: 7rem;
}

#rank-feed {
    margin-bottom: 3.5ex;
}

/* text classes */

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.sub {
    color: var(--sub-color);
}

.kerned-1 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* grid placement classes */

.gr1 { grid-row: 1; }
.gr2 { grid-row: 2; }
.gr3 { grid-row: 3; }
.gr4 { grid-row: 4; }
.gr5 { grid-row: 5; }
.gr6 { grid-row: 6; }
.gr7 { grid-row: 7; }
.gr8 { grid-row: 8; }

.gc11 { grid-column: 1 / 2; }
.gc12 { grid-column: 1 / 3; }
.gc13 { grid-column: 1 / 4; }
.gc14 { grid-column: 1 / 5; }
.gc23 { grid-column: 2 / 4; }
.gc24 { grid-column: 2 / 5; }
.gc33 { grid-column: 3 / 4; }
.gc34 { grid-column: 3 / 5; }
.gc44 { grid-column: 4 / 5; }