style.css

* {box-sizing: border-box;}

header, footer, section {
    display: block;
}

[v-cloak] > * { display:none }
[v-cloak]::before { content: "loading..." }

body {
    padding: 0 1rem;
    margin: 0;
    font-family: sans-serif;
    background: #08476e;
    background: linear-gradient(220deg,#64bf64, #08476e);
    color: #fff;
    font-size: 1rem;
    min-height: 100vh; /* thanks @jaaprood */
}

/* Christmas Backgrounds */
body.christmas {
    background: url(img/xmas_green.jpg) no-repeat #0f2925;
    background-size: cover;
}
body.theme-hot.christmas {
    background: url(img/xmas_red.jpg) no-repeat #711c11;
    background-size: cover;
}

@media screen and (min-width: 1200px) {
    body.christmas {
        background-image: url(img/xmas_green_landscape.jpg);
    }
    body.theme-hot.christmas {
        background-image: url(img/xmas_red_landscape.jpg);
    }
}

#app, 
.container {
    margin: 0 auto;
    max-width: 768px;
}

#app {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    min-height: 88vh;
    position: relative;
}

#app > main {
    flex-grow: 1;
}

.center {text-align: center;}
.right {text-align: right;}
.top-space {margin-top: 4rem;}

header.container {margin-bottom: 2rem;}
header h1 {margin: 0;}

section.winner {
    padding: 1rem;
    text-align: center;
    background: #1d1d1d;
}

.theme-white section.winner {
    background: #2799b7;
    color: #cff9ec;
}

form {
    background: rgba(12, 58, 80, 0.96);
    padding: 2rem;
    padding-bottom: 1px;
    z-index: 5;
}

form button {
    width: 8rem;
    border-radius: 3px;
}

form button.auto {
    width: auto;
}

.theme-white form {
    background: #92dec7;
}

.theme-white form button {
    box-shadow: none !important;
}

form h2 {
    margin-top: 0;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 0.3rem;
}

div.addPlayerContainer {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
    gap: 1rem;
}

.addPlayerContainer div:first-child {flex-grow: 1;}

.addPlayerContainer input[type=text] {
    width: 100%;
}

button {
    background: #1f5f58;
    border: 1px solid #75e679;
    color: #99ef9b;
    padding: 0.5rem;
    font-size: 0.9rem;
    margin: 0.6rem 0;
}

button.cancel {
    color: #a2e6a4;
    border-color: #46a248;
    background: rgb(12, 58, 80);
}

button.warning {
    margin-right: 1rem;
    background: #343038;
    border-color: #bf964a;
    color: #f19c87;
}

input[type=text],
input[type=number] {
    padding: 0.5rem;
    font-size: 1rem;
    border: none;
}

input[type=number] {
    margin-right: 0.5rem;
}

form.enterScore {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100%;
    padding: 2rem 1rem;
    text-align: center;
    overflow: auto;
}

.score-container {
    display: grid;
    grid-template-columns: 55% 45%;
}

/* Footer */
footer {
    font-size: 0.8rem;
    margin-top: 2rem;
}

footer a {color: #77c97c;}
footer a:visited {color: #6ebd73;}

footer a:hover {
    background: #6ebd73;
    color: #224241;
    text-decoration: none;
}

.theme-white footer a,
.theme-white footer a:visited {
    color: #3c7940;
}

.themeSwitcher {
    float: right;
    margin-bottom: 1rem;

    /*position: absolute;
    bottom: 0;
    right: 0; */
}
    .themeSwitcher > div {
        display: inline-block;
        width: 40px;
        height: 25px;
        cursor: pointer;
    }

    .themeSwitcher .white {background: #eee; margin-right: 8px;}
    .themeSwitcher .default {background: #23676b; margin-right: 8px;}
    .themeSwitcher .hot {background: #eabd2e;}

    .theme-white .themeSwitcher .white {background: #fff;}
    
/* THEME - HOT */
body.theme-hot {
    background: linear-gradient(110deg,#efb024,#dc7626);
}

/* THEME - WHITE for being outside y'know? */
body.theme-white {
    background: linear-gradient(110deg, #fff, #ddd);
    color: #333;
}

.theme-hot footer a,
.theme-hot footer a:visited {
    color: #3c3c3c;
}
.theme-hot footer a:hover {
    background: #d24d15;
    color: #fff;
}

.christmas.theme-hot footer a,
.christmas.theme-hot footer a:visited {
    color: #f79657;
}

.theme-hot button {
    background: #ea5c11;
    border: 1px solid #ffecb6;
    color: #fff;
}

.theme-hot button.warning {
    background: #343038;
    border-color: #ff5722;
}

.theme-hot div.score button {
    color: #fbfafb;
    background: #e06b1f;
}

.theme-hot form {
    background: rgba(64, 31, 54, 0.96);
}

.theme-hot button.cancel {
    color: #e2a6a6;
    border-color: #8e5b75;
    background: rgb(105, 59, 83);
}

.theme-white button {
    background: #3d5894;
    color: #eef4f5;
    box-shadow: 3px 3px 0px 0px rgb(164, 201, 218);
    border: none;
}

.theme-white button.cancel {
    background: #38798a;
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
}

.theme-white button.warning {
    background: #e86613;
    box-shadow: 3px 3px 0px 0px rgba(134, 61, 49, 0.96);
    border: none;
    color: #fff;
}


/* Leaderboard */
.theme-hot section.leaderboard {
    color: #0a2c3c;
}
.christmas.theme-hot section.leaderboard {
    color: #fff;
    background: #4e1009c4;
}

.theme-hot section.leaderboard > div {
    border-bottom: 1px solid #efad26;
}
.christmas.theme-hot section.leaderboard > div {
    border-color: #a24f22;
}

.theme-white section.leaderboard {
    background: #fff !important;
}


.theme-hot .player.winning .pos {
    color: #f7d182;
}
.christmas.theme-hot .player.winning .pos {
    color: #eae8d6;
    background: #8a271a;
}
.theme-white .player.winning .pos {
    background: #38798a;
    color: #fff;
    font-weight: bold;
}


.theme-hot .player.myturn {
    background: #f7a448;
}
.christmas.theme-hot .player.myturn {
    background: #291610;
}
.theme-white .player.myturn {
    background: #92dec7;
}

.theme-hot .struckout {
    color: #924f34;
}

.theme-hot .history .line {
    background: #311d28;
}
.theme-hot .history .turn {
    background: #150e12;
    color: #de7a26;
}

.theme-white .history .turn {
    background: #fff;
    color: #111;
}
.theme-white .history .line {
    background: #fff;
}
.theme-white .history .turn.editing {
    background: #353535;
    background: radial-gradient(#7d7d7d, #353535);
    color: #c9f5e7;
}