/* GLOBAL */
@font-face {
    font-family: '04b20';
    src: url('asset/font/04b20.woff2') format('woff2'),
        url('asset/font/04b20.woff') format('woff');
}

@font-face {
    font-family: '04b03';
    src: url('asset/font/04b03.woff2') format('woff2'),
        url('asset/font/04b03.woff') format('woff');
}

@font-face {
    font-family: '04b03b';
    src: url('asset/font/04b03b.woff2') format('woff2'),
        url('asset/font/04b03b.woff') format('woff');
}

:root {
    /* primary colour (increasing brightness levels) */
    --pal-main-1: #262b44;
    --pal-main-2: #3a4466;
    --pal-main-3: #5a6988;
    --pal-main-4: #8b9bb4;
    --pal-main-5: #c0cbdc;
    /* accent colours */
    --pal-accent-1: #afb6ff;

    --root-bg: var(--pal-main-3);

    --page-border: var(--pal-main-4);
    --page-bg: var(--pal-main-5);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--page-border) var(--page-bg);
}

@supports selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: unset !important;
        scrollbar-color: unset !important;
    }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-thumb {
        background-color: var(--page-border);
        border: 1px solid transparent;
        background-clip: content-box;
    }
}

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--root-bg);
    overflow: auto;
    image-rendering: pixelated;
    font: 8px '04b03';
}

hr {
    height: 2px;
    margin: 4px 0;
    border-width: 0;
    background-image: url("asset/hr.gif");
}

/* FRAME */
#page {
    display: flex;
    width: calc(512px - 6px);
    height: calc(512px - 6px);
    border: 3px solid var(--page-border);
    background: var(--page-bg);
    margin-right: mod(100vw, 2px);
    /* mozilla screws up text pixel alignment with even height */
    margin-bottom: calc(1px - mod(100dvh, 2px));
}

#sidebar {
    display: flex;
    flex-direction: column;
    width: 108px;
    height: 100%;
    border-right: 2px solid var(--page-border);
}

#sidebar > header {
    display: flex;
    place-items: end;
    width: 108px;
    height: 64px;
    border-bottom: 2px solid var(--page-border);

    #avi { border-right: 2px solid var(--page-border); }
    a img {
        vertical-align: bottom;
        padding: 57px 7px 2px 2px;
    }
}

#sidebar > nav {
    --nav-link: var(--pal-main-2);

    flex-grow: 99;
    align-content: end;
    padding: 0 3px 1px 3px;

    menu {
        margin: 0;
        padding: 0;

        hr { margin: 1px 0 2px 0; }

        li {
            display: flex;
            height: 8px;
            width: 100%;

            list-style: none;
            &::before { content: url(asset/nav-inactive.gif); }
            /* [TODO] maybe use after for swap bg and fg colours on hover */

            line-height: 8px;
            font: 8px '04b03';
            a {
                --parent-ofs: 2px;
                --hover-ofs: 6px;
                --sublink-ofs: calc(var(--parent-ofs) + var(--hover-ofs));

                display: flex;
                color: var(--nav-link);
                text-decoration: none;
                flex-grow: 1;
                
                &::before {
                    transition: all 40ms cubic-bezier(0, 1, 0.5, 0.9);
                    content: "";
                    width: var(--parent-ofs);
                    background: repeat-x url(asset/nav-url-bg.gif);
                    margin: 0 2px 0 2px;
                }
                &:hover::before {
                    width: calc(var(--parent-ofs) + var(--hover-ofs));
                }
                
                &.sublink::before { width: var(--sublink-ofs); }
                &.sublink:hover::before {
                    width: calc(var(--sublink-ofs) + var(--hover-ofs));
                }

                &::after {
                    flex-grow: 99;
                    content: "";
                    background: repeat-x url(asset/nav-url-bg.gif);
                    margin-left: 1px;
                }
            }
        }
    }
}

#sidebar > footer {
    width: 108px;
    border-top: 2px solid var(--page-border);
    position: relative;

    #badge-carousel {
        height: 31px;
        margin: 2px 0 2px 0;

        & > .shade {
            position: absolute;
            top: 2px;
            width: 10px;
            height: 31px;
            background-color: var(--page-bg);
            opacity: 75%;
        }
        .shade:first-of-type { left: 0px; }
        .shade:last-of-type { right: 0px; }
    }
    
    #badges {
        position: absolute;
        display: flex;
        height: 31px;
        width: 88px;
        padding: 0 10px 0 10px;
        overflow: hidden;
        scroll-behavior: smooth;

        a, img {
            display: flex;
            /* width: 100%; */
        }
    }

    #badge-carousel-controls {
        margin-bottom: 2px;
        display: flex;

        img, hr { align-self: center; }
        img { padding: 0 2px; }
        img:hover {
            cursor: pointer;
            filter: brightness(150%);
        }
        hr {
            /* flex-grow: 1; */
            width: 100%;
            margin: 0 2px;
        }
    }
}

/* CONTENT */
main {
    --heading: var(--pal-main-2);

    --button-idle-bg: var(--pal-accent-1);
    --button-click-bg: color-mix(in oklch, var(--button-idle-bg), #000 5%);
    --button-border-light: color-mix(in oklch, var(--button-idle-bg), #fff 60%);
    --button-border-dark:  color-mix(in oklch, var(--button-idle-bg), #000 20%);

    --margin: 4px;
    --collapse-margin: calc(var(--margin) * 2);

    height: 100%;
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    overflow-y: scroll;

    h1, h2, h3 {
        font: 8px '04b20';
        color: var(--heading);
        &::before { opacity: 50%; }
        margin: var(--collapse-margin) 0;
        height: 8px;
    }
    h1::before {
        content: ". ";
        display: inline-block;
        width: 12px;
    }
    h2::before { content: "> "; }
    h3::before { content: ">> "; }

    & > p {
        padding-left: 12px;
        line-height: 10px;
    }
    p {
        color: var(--heading);
        margin: var(--collapse-margin) 0;
        /* margin: calc(1cap - 2px) 0; */
    }

    fieldset {
        border: 2px solid var(--page-border);
        margin: var(--collapse-margin) 0;
        padding: 4px 8px;
        
        & > legend {
            font: 8px '04b20';
            color: var(--heading);
        }
    }

    button {
        background-color: var(--button-idle-bg);
        border: 2px solid;
        border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
        border-radius: 0;
        margin: var(--margin) 0px;
        padding-top: 3px;

        font: 8px '04b03b';
        color: var(--heading);

        &:active {
            background-color: var(--button-click-bg);
            border-color: var(--button-border-dark) var(--button-border-light) var(--button-border-light) var(--button-border-dark);
        }
    }
}