:root, [data-bs-theme=light] {
    --bs-body-color: #fff;
    --bs-border-radius: .625rem;
    --text-glow-color: red;
    --text-glow:0 0 .3rem var(--bs-body-color),
                0 0 .625rem var(--text-glow-color),
                0 0 1rem var(--text-glow-color),
                0 0 1.25rem var(--text-glow-color),
                0 0 2.15rem var(--text-glow-color),
                0 0 2.5rem var(--text-glow-color),
                0 0 3rem var(--text-glow-color),
                0 0 4.68rem var(--text-glow-color);
}

body {
    background: linear-gradient(rgba(0, 0, 0, 0.776), rgba(0, 0, 0, 0.776)), url(./images/spy2.jpeg) 0 center / 20%;
    text-align: center;
}

main { min-height: 100vh; }

#game-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}

.btn {
    --bs-btn-padding-x: 1rem;
    transition: .3s;
}
.btn-dark { --bs-btn-bg: #343a40; }

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#player-count, #arrows .btn { text-shadow: var(--text-glow); }
#player-count { font-size: 3.5em; }

.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #434343;
    min-width: 250px;
}

#spy {
    font-size: 3em;
    text-shadow: var(--text-glow);
}
#word { font-size: 2.3em; }

#timer {
    font-size: 6.25em;
    color: white;
    text-shadow: var(--text-glow);
    -webkit-user-select: none;
    user-select: none;
}

footer { background: #00000080; }

@media only screen and (min-width: 992px) {
    #language-selector {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    #arrows .btn:hover { scale: 1.2; }
}