@font-face {
    font-family: jetbrains;
    src: url(JetBrainsMono-VariableFont_wght.ttf);
}
@font-face {
    font-family: firamono-bold;
    src: url(FiraMono-Bold.ttf);
}
@font-face {
    font-family: firamono-medium;
    src: url(FiraMono-Medium.ttf);
}
@font-face {
    font-family: firamono-regular;
    src: url(FiraMono-Regular.ttf);
}
:root {
    /* accent Color Palette */
    --accent-100: #fffcfd; /* Lightest Red - Backgrounds or Light Elements */
    --accent-200: #fff8ea; /* Light Red - Light Hover States or Soft Highlights */
    --accent-300: #ffdf9a; /* Light Medium Red - Secondary Buttons or Icons */
    --accent-400: #ffd271; /* Medium Red - accent Buttons or Active States */
    --accent-500: #ffc547; /* Core Red - Important Elements or CTAs */
    --accent-600: #f0ac1b; /* Dark Red - Warnings or Alerts */
    --accent-700: #a17413; /* Darker Red - Dark Backgrounds or Emphasis Text */
    --accent-800: #633e07; /* Very Dark Red - Hover States on Dark Backgrounds */
    --accent-900: #3d2607; /* Darkest Red - Dark Mode Heavy Elements */

    /* Gray Color Palette */
    --gray-100: #fcfcfc; /* Background or Light Elements */
    --gray-200: #ebebeb; /* Borders or Light Dividers */
    --gray-300: #bfbfbf; /* Placeholder Text or Disabled Elements */
    --gray-400: #a6a6a6; /* Secondary Text */
    --gray-500: #656880; /* Default Text Color */
    --gray-600: #545666; /* Headings or Strong Text */
    --gray-700: #484a57; /* Active or Hover Text */
    --gray-800: #34363d; /* Heavy Emphasis or Overlay Text */
    --gray-900: #262626; /* Dark Mode Heavy Elements */

    /* primary Color Palette */
    --primary-100: #f6f8ff; /* Lightest Blue - Background primarys or Light Elements */
    --primary-200: #e9efff; /* Light Blue - Hover States on Light Backgrounds */
    --primary-300: #c6d6ff; /* Light Medium Blue - Secondary Buttons or Icons */
    --primary-400: #99b4f5; /* Medium Blue - Informative Elements or Highlights */
    --primary-500: #7091e9; /* Core Blue - Callouts or Featured Sections */
    --primary-600: #3d61bb; /* Dark Blue - Emphasis Elements or CTAs */
    --primary-700: #294da8; /* Darker Blue - Dark Background primarys */
    --primary-800: #172d61; /* Very Dark Blue - Emphasis Text or Hover States on Dark Backgrounds */
    --primary-900: #101d3b; /* Darkest Blue - Dark Mode Heavy Elements */

    /* dark primary */
    --primary-dark-100: #f6f8ff; /* Lightest Blue - Background primarys or Light Elements */
    --primary-dark-200: #e9efff; /* Light Blue - Hover States on Light Backgrounds */
    --primary-dark-300: #c6d6ff; /* Light Medium Blue - Secondary Buttons or Icons */
    --primary-dark-400: #99b4f5; /* Medium Blue - Informative Elements or Highlights */
    --primary-dark-500: #7091e9; /* Core Blue - Callouts or Featured Sections */
    --primary-dark-600: #3d61bb; /* Dark Blue - Emphasis Elements or CTAs */
    --primary-dark-700: #294da8; /* Darker Blue - Dark Background primarys */
    --primary-dark-800: #172d61; /* Very Dark Blue - Emphasis Text or Hover States on Dark Backgrounds */
    --primary-dark-900: #101d3b; /* Darkest Blue - Dark Mode Heavy Elements */

    --dark-mode-red: #F7768E;
    --dark-mode-orange: #ff9e64;
    --dark-mode-yellow: #E0AF68;
    --dark-mode-green: #9ECE6A;
    --dark-mode-cyan: #7DCFFF;
    --dark-mode-blue: #7AA2F7;
    --dark-mode-magenta: #BB9AF7;
    --dark-mode-bright-white: #C0CAF5;
    --dark-mode-white: #A9B1D6;
    --dark-mode-foreground: #C0CAF5;
    --dark-mode-black: #414868;
    --dark-mode-background-storm: #24283b;
    --dark-mode-background: #1A1B26;
    --dark-mode-bright-yellow: #ffcf68;
    --light-mode-background: #ffeddb;
    --light-mode-background-storm: #fffffe;
    --light-mode-foreground: #3c3c3c;
    --light-mode-black: #000000;
    --light-mode-red: rgb(248, 31, 49);
    --light-mode-yellow: #f99d13;
    --light-mode-bright-yellow: #f99d13;
    --light-mode-green: #67ce34;
    --light-mode-magenta: #9959d9;
    --light-mode-cyan: #0094b9;
    --header-height: 5rem;
    --header-top-bottom-padding: 1rem;
}

html, body {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    margin: 0;
    padding: 0;

    & .main {
        display: flex;
        flex-grow: 1;
        max-width: 80%;
    }

    & .left, .right {
        min-width: 10%;
    }
}
.color-scheme-wrapper{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    --content-background: #24283b;
    --page-header-background: #24283b;
    --footer-background: #1A1B26;
    --link-text: #F7768E;
    --nametag-container-text: #ffcf68;
    --nametag-container-text-hover: #ffcf68;
    --nametag-container: #1A1B26;
    --nametag-container-hover: #11121a;
    --content-text: #dde1e4;
    --header-text: #7DCFFF;
    --nav-text: #ffcf68;
    --headshot-shadow: #c1cad6;
    --footer-text: #dde1e4;
    --tn-background-storm: var(--dark-mode-background-storm);
    --tn-background: var(--dark-mode-background);
    --tn-foreground: var(--dark-mode-foreground);
    --tn-black: var(--dark-mode-black);
    --tn-red: var(--dark-mode-red);
    --tn-yellow: var(--dark-mode-yellow);
    --tn-bright-yellow: var(--dark-mode-bright-yellow);
    --tn-green: var(--dark-mode-green);
    --tn-magenta: var(--dark-mode-magenta);
    --tn-cyan: var(--dark-mode-cyan);
    --header-footer-bg: var(--tn-background-storm);
    --site-bg: var(--tn-background-storm);
    /* background: var(--site-bg); */
    /*linear-gradient(#1A1B26 20%, rgba(0, 0, 0, 0), #1A1B26), url('night-river-cottage-woodcut-circles-blur.png');*/
}
#toggleLights:checked ~ .color-scheme-wrapper{
    --header-text: var(--primary-700);
    --content-text: var(--gray-700);
    --content-background: var(--gray-100);
    --footer-text: var(--gray-700);
    --footer-background: var(--primary-200);
    --link-text: var(--primary-600);
    --page-header-background: var(--gray-100);
    --top-spacer-color: var(--primary-200);
    --headshot-shadow: var(--primary-900);
    --nametag-container: var(--primary-200);
    --nametag-text: var(--primary-700);
    --nametag-container-hover: var(--primary-300);
    --nametag-container-text: var(--primary-700);
    --nametag-container-text-hover: var(--primary-800);
    --nav-text: var(--primary-600);

    --tn-background-storm: var(--light-mode-background-storm);
    --tn-background: var(--light-mode-background);
    --tn-foreground: var(--light-mode-foreground);
    --tn-black: var(--light-mode-black);
    --tn-red: var(--light-mode-red);
    --tn-yellow: var(--light-mode-yellow);
    --tn-bright-yellow: var(--light-mode-bright-yellow);
    --tn-green: var(--light-mode-green);
    --tn-magenta: var(--light-mode-magenta);
    --tn-cyan: var(--light-mode-cyan);
    --header-footer-bg: var(--tn-background-storm);
    --site-bg: var(--tn-background-storm);
    background: var(--site-bg);
}

#toggleLights {
    position: absolute;
    display: none;
    & ~ label #lightModeSvg {
        display: none;
    }
    & ~ label #darkModeSvg {
        display: block;
    }
    &:checked {
        & ~ label #lightModeSvg {
            display: block;
        }
        & ~ label #darkModeSvg {
            display: none;
        } 
    }
}
#lightModeSvg, #darkModeSvg {
    position: absolute;
    right: 2%;
    --dark-light-svg-height: 1.5rem;
    top: calc(( var(--header-height) + var(--header-top-bottom-padding) - var(--dark-light-svg-height) ) / 2 );
    cursor: pointer;
    height: var(--dark-light-svg-height);
    width: var(--dark-light-svg-height);
    border-radius: 20%;
    padding: 0.5em;
}

#darkModeSvg {
    color: #ffcf68;
    border: solid 1px transparent;
    background-color: #1A1B26;
    &:hover {
        /* border: solid 1px var(--primary-700); */
        background-color: #11121a;
        color: #ffcf68;
        transition: 
            background 1s,
            color 1s;
    }
}
#lightModeSvg {
    color: var(--primary-700);
    border: solid 1px transparent;
    background-color: var(--primary-200);
    &:hover {
        /* border: solid 1px var(--primary-700); */
        background-color: var(--primary-300);
        color: var(--primary-800);
        transition: 
            background 1s,
            color 1s;
    }
}

.content {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    font-size: 16px;
    font-family: jetbrains;
    color: var(--content-text);
    background: var(--content-background);
    & .main {
        flex-direction: column;
    }
}

body {
    flex-grow: 1;
    background: var(--content-background);
    font-family: firamono-regular;
    font-size: 16px;
    color: var(--content-text);
}

p {
    padding: 0;
    margin: 0;
}

.h1Container {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.h1LeftTriangle {
    display: inline-block;
    align-self: center;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 3rem 3rem;
    border-color: transparent transparent var(--tn-background) transparent;
}

.h1RightTriangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3rem 3rem 0 0;
    border-color: var(--tn-background) transparent transparent transparent;
}
h1 {
    font-size: 2.3rem;
    /* padding: 0.25rem; */
    color: var(--header-text);
    height: 3rem;
    /* padding: 0 0.5rem; */
    /* background: var(--tn-background); */
}
footer {
    color: var(--footer-text);
    background-color: var(--footer-background);
    & a {
        color: var(--link-text);
    }
}
/* Header */
header {
    text-align: center;
    flex-shrink: 0;
    display: flex;
    padding: var(--header-top-bottom-padding) 0;
    background-color: var(--page-header-background);
    min-height: var(--header-height);
    font-family: firamono-medium;
    font-size: 20px;
    & .main {
        flex-direction: row;
        align-items: center;
    }
    & a {
        text-decoration: none;
        color: var(--nav-text);
        &:hover {
            /* color: var(--gray-800);
            transition: 
                color 1s; */
        }
    }
    & .topnav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        & ul {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            list-style: none;
            padding-left: 0;
            & li:not(:first-child) {
                margin-left: 2rem;
            }
            /* & li {
                padding: 0.5rem 1rem;
                &:hover {
                    background-color: var(--primary-200);
                    border-radius: 10%;
                    transition: background 0.5s;
                }
            } */
        }
    }
}
#top-spacer {
    height: 0rem;
    width: 100%;
    background-color: var(--top-spacer-color);
}
#headshot-div {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    & #headshot {
        height: var(--header-height);
        width: var(--header-height);
        /*border: 0.2rem solid var(--tn-white);*/
        border-radius: 50%;
        box-shadow: 0px 5px 35px -25px var(--headshot-shadow);
    }
    & #nametag-div {
        /* background-color: var(--accent-300); */
        /* border: 2px solid var(--accent-300); */
        /* border: 2px solid transparent; */
        border-radius: 20% 0 20% 0%;
        padding: 0.5em;
        margin-left: 1em;
        & a {
            /* color: var(--primary-700); */
        }
    }
}

#nametag-div {
    background: var(--nametag-container);
    color: var(--nametag-text);
    /* border: 2px solid transparent; */
    &:hover {
        /* border: 2px solid var(--primary-900); */
        background-color: var(--nametag-container-hover);
        color: var(--nametag-container-text-hover);
        /* transition: border 1s; */
        transition: 
            background 1s,
            color 1s;
    }
    & a {
        color: var(--nametag-container-text);
        &:hover {
            color: var(--nametag-container-text-hover);
            transition: 
                background 1s,
                color 1s;
        }
    }
}

footer {
    padding: 1rem 0 1rem 0;
    text-align: center;
    flex-shrink: 0;
}
.terminal {
    /* flex-grow: 1;  /* Makes the terminal div take all available space between header and footer */ */
    display: block;
    height: 50vh;
    cursor: text;  /* Cursor will always appear as text cursor in terminal area */
    overflow-y: auto; 
    /*background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('night-river-cottage-woodcut-circles-blur.png');*/
    /*background: var(--terminal-bg);*/
    /*box-shadow: inset 0 0 1em 0.5em var(--tn-background);*/
    & input#cmd {
        font: inherit;
        color: inherit;
        outline: none;
        border: none;
        background-color: transparent;
    }
    & a {
        color: var(--tn-red);
    }
    & .lsdir {
        color: var(--tn-red);
    }
    & .user {
        color: var(--tn-green);
    }
    & .host {
        color: var(--tn-magenta);
    }
    & .dir {
        color: var(--tn-red);
    }
    & .output div {
        white-space: pre-wrap;
    }
    & .suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem; /* space between suggestions */
        margin-top: 0.2rem;
    }
    & .suggestion-item {
        padding: 0.2rem 0.5rem; /* padding for each command suggestion */
        cursor: pointer;
        &:hover {
            background-color: var(--tn-background);
            border-radius: 20%;
        }
        /* Additional styles for the suggestion items */
    }
    & input#cmd {
        pointer-events: none;  /* Makes the input non-selectable on its own */
        caret-color: transparent;
        padding: 0px;
        /*line-height: 22px;*/
        width: 100%;
        /*height: 22px;*/
    }
    & .prompt {
        display: inline-flex;
        align-items: center;
    }
    & .input {
        appearance: none;
        display: flex;
        padding: 0;
        margin: 0;
        border: none;
    }
    & .line {
        display: flex;
        flex-direction: row;
        position: relative;
        /*height: 22px; /* need to set this programatically... firefox does not behave properly with the input text box */
    }
    & .fake-caret {
        display: inline-block;
        position: absolute;
        background-color: var(--tn-foreground);
        color: var(--tn-background-storm);
        height: 100%;
        min-width: 1ch;
        animation: blink 1s step-end infinite;
    }
}
@keyframes blink {
    0% {background-color: var(--tn-foreground);}
    50% {background-color: transparent; color: var(--tn-foreground);}
}
@media screen and (max-width: 750px) {
    html, body {
        & .main {
            max-width: 90%;
        }
        & .left, .right {
            min-width: 5%;
            flex-shrink: 0;
        }
    }
    #headshot-div {
        flex-direction: column;
        margin-top: 0.5rem;
        flex-grow: 0;
        & #nametag-div {
            margin-left: 0;
        }
        & #nametag {
            margin-left: 0;
            padding-bottom: 0;
            border: none;
        }
    }
    #top-spacer {
        height: 0;
    }
    header {
        padding-top: 0;
        padding-bottom: 0;
        
        & .topnav {
            align-items: flex-end;
            margin-bottom: 0.5rem;
            & ul {
                flex-direction: column;
                align-items: flex-start;
                margin-top: 0.5rem;
                margin-bottom: 0;
                margin-left: 2rem;
                & li:not(:first-child) {
                    margin-left: 0;
                    margin-top: 0.3rem;
                    margin-right: 0;
                }
                & .active {
                    color: transparent;
                }
            }
        }
        & .main {
            justify-content: center;
            align-items: flex-end;
        }
    }
    #lightModeSvg, #darkModeSvg {
        top: 0.8rem;
    }
}