:root {
    --background-color-light: #f4f4f4;
    --text-color-light: #333;
    --h1-color-light: #a00;
    --log-background-color-light: #fff;
    --log-border-color-light: #a00;

    --background-color-dark: #333;
    --text-color-dark: #f4f4f4;
    --h1-color-dark: #f4f4f4;
    --log-background-color-dark: #444;
    --log-border-color-dark: #f4f4f4;

    --button-background-color: #a00;
    --button-text-color: #fff;
    --button-hover-background-color: #c00;
}

body {
    font-family: sans-serif;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

body[data-theme='light'] {
    background-color: var(--background-color-light);
    color: var(--text-color-light);
}

body[data-theme='dark'] {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

.theme-switcher {
    position: absolute;
    right: .75rem;
    top: .75rem;
}

#theme-switch {
    background: none;
    border: 1px solid;
    cursor: pointer;
    padding: .25rem .5rem;
}

body[data-theme='light'] #theme-switch {
    border-color: var(--text-color-light);
    color: var(--text-color-light);
}

body[data-theme='dark'] #theme-switch {
    border-color: var(--text-color-dark);
    color: var(--text-color-dark);
}

.container {
    margin: auto;
    overflow: hidden;
    padding: 1.25rem;
    width: 80%;
}

h1 { color: var(--h1-color-light); }

body[data-theme='dark'] h1 { color: var(--h1-color-dark); }

.scores {
    border: 1px solid;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.25rem;
    padding: .75rem 0;

    h2 {
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
    }
}

body[data-theme='light'] .scores {
    border-color: var(--text-color-light);
    color: var(--text-color-light);
}

body[data-theme='dark'] .scores {
    border-color: var(--text-color-dark);
    color: var(--text-color-dark);
}

.actions button {
    background-color: var(--button-background-color);
    border: none;
    color: var(--button-text-color);
    cursor: pointer;
    font-size: 1em;
    margin: 0 .5rem 1.5rem;
    padding: .5rem 1.5rem;
    transition: background-color 0.3s;

    &:hover { background-color: var(--button-hover-background-color); }
}

.intro {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0 auto 1.5rem;
    max-width: 64rem;
    text-wrap: balance;
}

.log {
    margin-top: 1.5rem;
    text-align: left;
}

.log ul {
    list-style-type: none;
    padding: 0;
}

.log li {
    margin-bottom: .25rem;
    padding: .5rem;
    transition: background-color 0.3s, border-left-color 0.3s;
}

body[data-theme='light'] .log li {
    background: var(--log-background-color-light);
    border-left: 5px solid var(--log-border-color-light);
}

body[data-theme='dark'] .log li {
    background: var(--log-background-color-dark);
    border-left: 5px solid var(--log-border-color-dark);
}