@charset "UTF-8";


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}


/* FONTS */

    @font-face {
        font-family: 'Enhance';
        src: url('../media/fonts/Enhance.ttf');
    }

    @font-face {
        font-family: 'tiny';
        src: url('../media/fonts/TinyUnicode.ttf');
        ascent-override: 50%;  
    }


/*  HIDE SCROLLBAR*/

    * {
        -ms-overflow-style: none;
        /* IE, Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    *::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }


:root {

    --surface: #adadad;

    --surface-dark:#777777;
    --surface-darker:#444444;

    --border-highlight: #ffffff;

    --border-light:#dddddd;
    --border-dark:#555555;
    --border-darker:#222222;
    --border-shadow:#21340e;

    --surface-yellow:#729b4e;
    --border-light-yellow:#cce1b8;
    --border-dark-yellow:#4e6b34;
    --border-darker-yellow:#344920;

    --surface-brown:#5b7a40;
    --border-dark-brown:#47221c;
    --border-darker-brown:#291410;

    --text-color:#ffffff; 
    --link-color: #066d1c;

}


/* BODY */

    body {
        padding: 0;
        margin: 0;
        font-family: enhance;
        color: ghostwhite;

        text-shadow: 1px 2px rgba(0, 0, 0, 0.25);
    }

    .wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .window {
        background-color: var(--surface);

        box-shadow:
            -1px -1px inset var(--border-light),
            1px 1px inset var(--border-shadow),
            -2px -2px inset var(--border-light),
            2px 2px inset var(--border-shadow)
        ;

        height: auto;
        padding: calc(2px + 4px);
    }

    nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    summary {
        background: var(--surface-brown);

        height: 36px;
        padding: 0px 0px 0px 8px;

        font-family: 'tiny';
        font-size: 2rem;

        box-shadow:
            2px 2px inset var(--border-light-brown),
            -2px -2px inset var(--border-dark-brown)
        ;
    }

    summary::marker {
        font-size: 1.2rem;
    }

    nav a {
        text-decoration: none;
        color: ghostwhite;
    }

    nav ul {
        margin-top: 6px;
    }

    nav li {
        margin: 0;
        padding: 0 0 0 8px;
        cursor: pointer;
        list-style-type: none;

        font-size: 1.4em;
        background: var(--surface);

        border: 1px outset #cccccc;

    }

    nav li:before {
        content: '>';
    }

    nav li:hover {
            background: var(--surface-dark);
    }

    .side-50 {
        width: 50%;
    }

    .offsite li:before {
        content: '';
    }