html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;

    --page-bg-major: #a6d8ff;
    --page-bg-minor: #4fb3ff;

    --panel-bg: white;
    --panel-fg: black;
    --panel-border-primary: rgb(99, 99, 99);
    --panel-border-secondary: white;


}
@media (prefers-color-scheme: dark) {
    html {
        --page-bg-major: black;
        --page-bg-minor: black;

        --panel-bg: rgb(24, 24, 24);
        --panel-fg: white;
        --panel-border-primary: #414141;
        --panel-border-secondary: #000000;
    }
}

.panel {
    border: 1px solid var(--panel-border-primary);
    border-radius: 1mm;
    background-color: var(--panel-bg);
    color: var(--panel-fg);
    box-shadow: 0 0 0 1px var(--panel-border-secondary);
}

body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 2mm;
    height: 100vh;
    margin: 0;
    padding: 2mm;
    background-image:linear-gradient(60deg,rgba(0,0,0,.25) 0,rgba(0,0,0,.25) 1.8%,rgba(0,0,0,.2) 2.2%,rgba(0,0,0,.15) 2.6%,rgba(0,0,0,.15) 5.9%,rgba(0,0,0,.1) 6.2%,rgba(0,0,0,.07) 6.5%,rgba(0,0,0,.07) 8.1%,rgba(255,255,255,.01) 8.5%,rgba(255,255,255,.04) 8.8%,rgba(255,255,255,.04) 11.9%,rgba(255,255,255,.08) 12.3%,rgba(255,255,255,.1) 12.7%,rgba(255,255,255,.1) 14.6%,rgba(255,255,255,.15) 15%,rgba(255,255,255,.15) 15.4%,rgba(255,255,255,.2) 16.6%,rgba(255,255,255,.27) 18.1%,rgba(255,255,255,.29) 18.7%,rgba(255,255,255,.27) 19%,rgba(255,255,255,.27) 23.2%,rgba(255,255,255,.21) 23.6%,rgba(255,255,255,.17) 24%,rgba(255,255,255,.17) 26.1%,rgba(255,255,255,.11) 26.5%,rgba(255,255,255,.08) 26.9%,rgba(255,255,255,.08) 30.7%,rgba(255,255,255,.03) 31.1%,rgba(255,255,255,.03) 31.5%,rgba(255,255,255,.01) 32.9%,rgba(0,0,0,.04) 34.5%,rgba(0,0,0,.05) 34.9%,rgba(0,0,0,.05) 35.3%,rgba(0,0,0,.05) 37.4%,rgba(255,255,255,.01) 37.9%,rgba(255,255,255,.03) 38.3%,rgba(255,255,255,.03) 41.8%,rgba(255,255,255,.08) 42.2%,rgba(255,255,255,.11) 42.6%,rgba(255,255,255,.11) 45%,rgba(255,255,255,.16) 45.4%,rgba(255,255,255,.16) 45.8%,rgba(255,255,255,.21) 47.1%,rgba(255,255,255,.26) 48.4%,rgba(255,255,255,.24) 48.9%,rgba(255,255,255,.21) 49.3%,rgba(255,255,255,.21) 52.9%,rgba(255,255,255,.15) 53.4%,rgba(255,255,255,.12) 53.8%,rgba(255,255,255,.12) 55.5%,rgba(255,255,255,.06) 56%,rgba(255,255,255,.04) 56.4%,rgba(255,255,255,.04) 60.1%,rgba(0,0,0,.01) 60.6%,rgba(0,0,0,.02) 61%,rgba(0,0,0,.02) 62.7%,rgba(0,0,0,.07) 63.2%,rgba(0,0,0,.07) 63.6%,rgba(0,0,0,.11) 65%,rgba(0,0,0,.16) 66.5%,rgba(0,0,0,.14) 67%,rgba(0,0,0,.12) 67.4%,rgba(0,0,0,.12) 69.8%,rgba(255,255,255,.01) 70.3%,rgba(255,255,255,.03) 70.7%,rgba(255,255,255,.03) 73.9%,rgba(255,255,255,.09) 74.4%,rgba(255,255,255,.12) 74.8%,rgba(255,255,255,.12) 76.5%,rgba(255,255,255,.18) 77%,rgba(255,255,255,.18) 77.4%,rgba(255,255,255,.23) 78.6%,rgba(255,255,255,.28) 79.9%,rgba(255,255,255,.25) 80.4%,rgba(255,255,255,.22) 80.8%,rgba(255,255,255,.22) 83.9%,rgba(255,255,255,.16) 84.4%,rgba(255,255,255,.13) 84.8%,rgba(255,255,255,.13) 86.6%,rgba(255,255,255,.07) 87.1%,rgba(255,255,255,.07) 87.5%,rgba(255,255,255,.04) 88.8%,rgba(0,0,0,.01) 90.2%,rgba(0,0,0,.03) 90.7%,rgba(0,0,0,.04) 91.1%,rgba(0,0,0,.04) 92.7%,rgba(0,0,0,.09) 93.2%,rgba(0,0,0,.11) 93.6%,rgba(0,0,0,.11) 94.9%,rgba(0,0,0,.07) 95.4%,rgba(0,0,0,.05) 95.8%,rgba(0,0,0,.05) 96.9%,rgba(0,0,0,.1) 97.4%,rgba(0,0,0,.1) 97.8%,rgba(0,0,0,.14) 98.3%,rgba(0,0,0,.2) 98.8%,rgba(0,0,0,.18) 99%,rgba(0,0,0,.16) 99.15%,rgba(0,0,0,.16) 99.35%,rgba(0,0,0,.12) 99.45%,rgba(0,0,0,.1) 99.52%,rgba(0,0,0,.1) 99.6%,rgba(0,0,0,.17) 99.67%,rgba(0,0,0,.2) 99.73%,rgba(0,0,0,.2) 99.79%,rgba(255,255,255,.01) 99.84%,rgba(255,255,255,.03) 99.89%,rgba(255,255,255,.03) 99.94%,rgba(0,0,0,.1) 99.97%,rgba(0,0,0,.16) 99.99%,rgba(0,0,0,.16) 100%),linear-gradient(118deg, var(--page-bg-major) 0, var(--page-bg-minor) 100%)
}

a {
    text-decoration: none;
    color: inherit;
}

nav {
    display: flex;
    flex-direction: row;
    gap: 2mm;

    user-select: none;

    padding: 1mm 2mm;


    a {
        transition: border .1s;
        border: 1px solid transparent;
        border-radius: 1mm;;
        padding: 0 1mm;
    }
    a:hover {
        border: 1px solid var(--panel-border-primary)
    }
}

main {
    flex-grow: 1;
    overflow-y: auto;
}

footer {
    background-color: var(--panel-bg);
    color: rgb(from var(--panel-fg) r g b / calc(alpha / 2));
    font-size: 80%;
    margin: 0 -2mm -2mm -2mm;
    padding: 1mm;
    border-top: 1px solid var(--panel-border-primary);

    display: flex;
    gap: 2mm;

    div.filler {
        flex-grow: 1;
    }
}