@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sometype%20Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material%20Symbols%20Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200&display=swap');

* {
    margin: 0;
}

:root {
    --col-bg: #10151c;
    --col-surface: #18212b;
    --col-surface-hover: #202c38;
    --col-surface2: #141c25;
    --col-surface2-hover: #1c2732;
    --col-surface3: #0d131a;
    --col-surface3-hover: #151e27;
    
    --col-border: #30404d;
    --col-border-soft: #26343f;
    --col-text: #f1f5f7;
    --col-text-muted: #aebbc4;
    --col-text-faint: #71808b;

    --col-accent-soft: #8bd8f5;
    --col-accent: #36b9e8;
    --col-accent-deep: #1689b7;
    --col-accent-blue: #00a8df;
    --col-accent-yellow: #f4d35e;
    --col-accent-pink: #e889a8;
    --col-accent-green: #6bc49a;
    --col-accent-orange: #e99a62;

    --col-success: #6bc49a;
    --col-warning: #f4c95d;
    --col-error: #e87575;
    --col-info: #55bde5;
    --col-link: #65c8ee;

    --col-codebg: #0a1016;

    --font-heading: "Quicksand", "Roboto", system-ui, sans-serif;
    --font-main: "Quicksand", "Roboto", system-ui, sans-serif;
    --font-mono: "Sometype Mono", "JetBrains Mono", "Cascadia Code", "Andane Mono", monospace;
    font-synthesis: none;
}

body {
    background-color: var(--col-bg);
    cursor: url("/assets/cursors/default.cur") 2 2, default;
}

header {
    width: 100vw;
    box-sizing: border-box;
    color: var(--col-text);
    font-family: var(--font-main);
    padding: 30px;
    display: grid;
    justify-content: center;
    background-color: var(--col-surface3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    h1, h2, h3, h4, h5, h6, p {
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 600;
    }
    .accent {
        color: var(--col-accent);
    }
    .logoFlex {
        display: flex;
        gap: 8px;
        align-items: center;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        font-variation-settings: 'FILL' 1;
    }
    #topLabel {
        border: transparent 2px solid;
        transition: 0.2s;
        outline-color: transparent;
        border-color: transparent;
        font-size: 1.3em;
        display: flex;
        align-items: center;
        gap: 8px;
        img {
            height: 1.5em;
        }
    }
    #topLabel:hover {
        border: var(--col-accent) 2px solid;
        outline: rgb(from var(--col-accent-deep) r g b / 0.3) 4px solid;
    }
    .usefulSpecs {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-main);
    }

    input[type="range"] {
    --value: 50%;

    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    cursor: url("/assets/cursors/default.cur") 2 2, default;

    background: linear-gradient(
        to right,
        var(--col-accent) 0%,
        var(--col-accent) var(--value),
        var(--col-border) var(--value),
        var(--col-border) 100%
    );
}

    input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 0.4em;
        background: var(--col-accent-soft);
        cursor: url("/assets/cursors/pointer.cur") 2 2, pointer;
        transition: 0.2s;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.05) rotate(12deg);
        background-color: oklch(from var(--col-accent-soft) calc(l + 0.05) c h);
    }

    input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 0.4em;
        background: var(--col-accent-soft);
        cursor: url("/assets/cursors/pointer.cur") 2 2, pointer;
        transition: 0.2s;
    }

    input[type="range"]::-moz-range-thumb:hover {
        transform: scale(1.05) rotate(12deg);
        background-color: oklch(from var(--col-accent-soft) calc(l + 0.05) c h);
    }
}

h1.liquid {
    padding: 12px 48px;
    border-radius: 100vw;
    background-color: var(--col-surface2);
}

main {
    height: calc(100vh - 150px - 2em);
    display: grid;
    justify-content: center;
    align-items: center;
}

main.bgMenu {
    background-image: url("/assets/img/bgMenu.svg");
    animation: bgscroll 60s linear infinite;
}

div#lock {
    button {
        background-color: var(--col-surface);
        border-radius: 100vh;
        border: var(--col-border-soft);
        width: 12rem;
        aspect-ratio: 1;
        cursor: pointer;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        cursor: url("/assets/cursors/pointer.cur") 2 2, pointer;
        transition: 0.2s;
        border-color: transparent;
        outline-color: transparent;
        .material-symbols-rounded {
            font-size: 5em;
            font-variation-settings: 'FILL' 1;
            color: var(--col-text);
        }
    }
    button:hover {
        transform: scale(1.05);
        border: var(--col-accent) 2px solid;
        outline: rgb(from var(--col-accent-deep) r g b / 0.3) 4px solid;
    }
}

div#lock[hidden] {
    display: none;
}

div#gameSelect {
    display: grid;
    justify-content: center;
    align-items: center;
}

div#gameSelect[hidden] {
    display: none;
}

section.centre {
    text-align: center;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    h2 {
        font-size: 2em;
        font-family: var(--font-heading);
        color: var(--col-accent-soft);
    }
    p {
        color: var(--col-text);
        font-family: var(--font-main);
    }
}

@keyframes bgscroll {
    from {
        background-position: 0 0;
    } to {
        background-position: -100% 100%;
    }
}