/*
    * https://colorhunt.co/palette/4a3933f0a500e45826e6d5b8
*/

$brown: #4A3933;
$dbrown: #382e2b;

$yellow: #F0A500;
$lyellow: #e9b648;

$orange: #E45826;

$white: #E6D5B8;
$lwhite: #e7dbc5;


$menuHeight: 45%;


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: $dbrown;         // default text colour
}
body, html {
    background-color: $white;
    padding-bottom: 1em;
}


:root {
    color-scheme: dark; // tell the browser that this website uses dark colour scheme
    scrollbar-color: $lyellow $brown; // filefox's scrollbar
}

::selection {
    background-color: transparentize($dbrown, 0.45);
}
::-moz-selection {
    background-color: transparentize($dbrown, 0.45);
}


// Chrome's, Edge's, and Safari's scrollbars
*::-webkit-scrollbar {
    width: 12px;
}
*::-webkit-scrollbar-track {
    background: $brown;
}
*::-webkit-scrollbar-thumb {
    background-color: $lyellow;
    border-radius: 6px;
    border: 3px solid $brown;
}


.nav-main {
    display: block;
    position: sticky;
    top: 0;

    background-color: $brown;
}

.nav-list {
    display: block;
    list-style: none;
    padding: 0.7em;
}

.nav-item {
    display: inline;
    margin-right: 0.6em;
    
    font-family: Hack, monospace;
    font-size: 1.05em;

    color: $yellow;
    text-decoration: none;

    transition: color 0.5s;
}
.nav-item:hover a:not(.nav-logo),
.nav-item:focus {
    color: $lyellow;
}


.nav-logo {
    margin: 0;

    float: right;
    font-weight: 700;
    font-size: 1.1em;

    letter-spacing: 0.195ch;
    text-decoration: none;

    color: $lyellow;

    transition: color 0.5s;
}
.nav-logo:hover,
.nav-logo:focus {
    color: darken($lyellow, 10%);
}


.nav-item:focus,
.nav-logo:focus {
    outline: none;
    // border-bottom: 1px solid $lyellow;
}


@media (min-width: 700px) {
    .bigHide {
        display: none;
    }
}
@media (max-width: 700px) {
    .nav-item {
        margin: 0;
    }
}

.smallHide {
    display: none;
}


.error {
    padding: 0.4em;

    & *, & {
        background-color: $orange;
        color: $white;
        
        font-weight: 700;
        font-family: Hack, monospace;
    }
}


@keyframes slideup {
    0% {
        height: 0%;
    }

    100% {
        height: $menuHeight;
    }
}
@keyframes slidedown {
    0% {
        height: $menuHeight;
    }

    99.999% {
        height: 0%;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}

.mobile-menu {
    display: block;
    margin: 0;

    position: fixed;
    bottom: 0;
    padding: 0.7em;

    width: 100%;
    height: $menuHeight;

    & *, & {
        list-style: none;
    
        color: $lwhite;
        background-color: $brown;

        font-family: Hack, monospace;
    }

    animation: slideup;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;

    overflow-y: scroll;
}


.hiddenMobile {
    animation: slidedown 0.6s;
    animation-fill-mode: forwards; 
}
.hiddenMobile-noanim {
    display: none;
}

.keep-whitespace {
    white-space: pre;
}


.cmd-output {
    overflow-x: scroll;
    padding: 0.8em;
}

.cmd {
    display: inline;
    border: none;
    outline: none;

    padding: 0.3em;
    padding-left: 0.6em;

    margin: 0.5em;
    margin-top: 0.8em;

    font-family: Hack, monospace;
    font-size: 0.95em;

    border-left: 2px solid $white;
    width: 99%;
}
.cmd:focus {
    border-left: 2px solid $lyellow;
}