/* TODO: Style scrollbar */

:root {
    --gray: #bbc8ff80;
    --extra-light: #b099cf;
    --light: #7e5faa;
    --medium: #19213f;
    --dark: #090e1d;
    --extra-dark: #02060f;
    --accent: #af3322;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: min(calc(12px + 0.4vh), 2vw);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: inherit;
}

h1, h2 {
    font-weight: initial;
}

body {
    background-color: var(--medium);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

button {
    font-family: inherit;
    user-select: none;
}



#header {
    background-color: var(--medium);
    padding: 0.25em;
    box-shadow: 0 0 1em black;
    z-index: 1;

    h1 {
        color: var(--accent);
        margin: 0.25em;
        font-size: 1.75rem;
    }

    div {
        margin: 0.25em;
    }

    .version {
        color: var(--gray);
        position: absolute;
        top: 0.25em;
        right: 0.25em;
    }
}

#about {
    background-color: var(--medium);
    color: var(--gray);
    padding: 2em;
    box-shadow: 0 0 1em black;
    z-index: 1;

    h2 {
        font-size: 1.25rem;
        margin: 1em 0;
    }

    p {
        margin: 1em 0;
    }
}

#footer {
    background-color: var(--extra-dark);
    color: var(--gray);
    padding: 0.5em;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 1em #00000080;
    z-index: 2;

    .author {
        float: right;
        text-align: right;
    }
}



/* TODO: Make the border glow follow the mouse cursor */
.border {
    border-style: solid;
    border-image: radial-gradient(circle at 0% 0%, var(--light), var(--medium)) 1;
    border-width: 1px;
}

#gameContainerWrapper {
    background-color: var(--dark);
    flex-grow: 1;
}

.gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1em;
    padding: 1em;
}

.game {
    background-color: var(--medium);
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 1em #00000040;
    padding: 1em;
    margin: 0;
    z-index: 1;
    cursor: pointer;

    .title {
        color: white;
        text-align: center;
        font-size: 1.2rem;
        height: 2em;
        margin-bottom: 1em;
    }

    .thumbnail {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        width: 100%;
        pointer-events: none;
    }

    .plays {
        color: var(--gray);
        text-align: left;
        font-size: 0.8rem;
    }
}

@media (hover: hover) {
    .game:hover {
        background-color: var(--extra-light);
        box-shadow: 0 0 1em #FFFFFF20;
    }
}

.game:active {
    background-color: var(--light);
}

.game.active {
    background-color: var(--extra-dark);
    box-shadow: 0 0 0em #00000040;
    cursor: default;
}