:root {
    --primary-bg-color: #fcfcfc;
    --accent-bg-color: #ececec;
    --modal-bg-color: #00000033;
    --selected-bg-color: #dcdcdc;
    --text-color: #000000;
    --border-color: #000000;
    --border-radius: 5vh;
}

[data-theme="dark"] {
    --primary-bg-color: #0c0c0c;
    --accent-bg-color: #1c1c1c;
    --selected-bg-color: #4c4c4c;
    --text-color: #ffffff;
    --border-color: #ffffff;
}

@font-face {
    font-family: "Fredoka One";
    src: url(../fonts/fredoka-one/FredokaOne-Regular.ttf);
    font-size: normal;
    font-weight: 300;
}

* {
    font-family: "Fredoka One", "Comic Sans MS", sans-serif, serif;
    color: var(--text-color);
    text-align: center;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s;
}

body, main, main header, main header h1, main header h3, div.modal, div.modal-body, main div.game-container, div.button-container {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body {
    height: 100vh;
    justify-content: start;
    background-color: var(--primary-bg-color);
}

main {
    height: 70vh;
    justify-content: start;
}

main header {
    width: 90vw;
    height: 20vh;
    flex-direction: row;
    justify-content: center;
    gap: 10vw;
}

main header h1, main header h1 img, div.modal div h1, div.modal div h1 img {
    height: 10vh;
}

main header h3 {
    width: 20vh;
    height: 5vh;
    font-size: 2.5vh;
    background-color: var(--accent-bg-color);
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    visibility: hidden;
}

div.button-container {
    position: fixed;
    bottom: 0;
    height: 30vh;
}

div.button-container button {
    all: unset;
    width: 80vw;
    height: 20vh;
    margin: 5vh 10vw;
    font-size: 5vh;
    background-color: var(--accent-bg-color);
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

img#settings-button {
    position: fixed;
    right: 12.5vw;
    top: 12.5vh;
    width: max(3vw, 6vh);
    aspect-ratio: 1 / 1;
    rotate: 0deg;
    background-color: var(--accent-bg-color);
    margin: 0;
    padding: 0.25vw;
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: 100%;
    z-index: 3000;
    transition:
        top 0.25s,
        right 0.25s,
        bottom 0.25s,
        left 0.25s,
        width 0.25s,
        height 0.25s,
        rotate 0.5s;
}

img#settings-button:hover {
    right: 12vw;
    top: 12vh;
    width: max(4vw, 8vh);
    rotate: 180deg;
}

aside.settings-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    position: fixed;
    top: 5vh;
    left: -100vw;
    width: min(90vw, 90vh);
    height: 90vh;
    background-color: var(--primary-bg-color);
    border: 1px solid;
    border-color: var(--border-color);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 0 min(1vw, 1vh);
    z-index: 500;
}

aside.settings-panel header {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: fit-content;
    height: 5vh;
}

aside.settings-panel header h1 {
    width: fit-content;
    font-size: 4vh;
    padding: 5vh 0;
}

aside.settings-panel section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: fit-content;
    overflow-x: visible;
}

aside.settings-panel section h3 {
    width: fit-content;
    font-size: 2vh;
    padding: 2.5vh 0;
}

aside.settings-panel section div {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: fit-content;
    overflow-x: auto;
}

aside.settings-panel section div img {
    height: 10vh;
    margin: 1vh;
    padding: 1vh;
    background-color: var(--primary-bg-color);
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: 1vh;
}

aside.settings-panel section div img:hover {
    background-color: var(--selected-bg-color);
}

aside.settings-panel section div img.active-player,
aside.settings-panel section div img.active-bg {
    background-color: var(--selected-bg-color);
}

aside.settings-panel footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vh;
}

aside.settings-panel footer div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 10vh;
}

aside.settings-panel footer div.highscore-reset-container {
    flex-direction: column;
}

aside.settings-panel footer div.dark-mode-container {
    flex-direction: row;
}

aside.settings-panel footer div button {
    all: unset;
    width: 25vh;
    height: 4vh;
    margin: 0 1vh;
    font-size: 2vh;
    background-color: var(--accent-bg-color);
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

aside.settings-panel footer div span {
    width: 25vh;
    font-size: 2vh;
}

a.gh-badge {
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    width: max(5vw, 5vh);
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border-radius: 100%;
    z-index: 666;
}

a.gh-badge img {
    width: 100%;
    height: 100%;
}