/*
 * VARIABELS
 */

:root {
    --light-red   : #f985a5;
    --light-orange: #fcb385;
    --light-yellow: #fde3ab;
    --light-green : #93f88c;
    --light-blue  : #75aaff;
    --light-purple: #a998fe;

    --dark-yellow : #ecb730;
    --dark-blue   : #073e9b;
    --dark-purple : #403060;

    --white : #f8f8f8;
    --black : #161616;

    --light-gray : #aaaaaa;
    --dark-gray  : #555555;
    --pure-black : #080808;
    --trans      : #00000000;

    --input-height: 1rem;
    --input-padding: 1rem;
}

@media (prefers-color-scheme: light) {
    :root {
        --red       : var(--light-red);
        --orange     : var(--light-orange);
        --yellow    : var(--dark-yellow);
        --green     : var(--light-green);
        --blue      : var(--dark-blue);
        --purple    : var(--dark-purple);

        --text      : var(--black);
        --subtext   : var(--dark-gray);
        --background: var(--white);
    }

    button:hover, button:focus, button:active {
        .folder { color: var(--light-purple); }
        .command { color: var(--light-blue); }
        .file { color: var(--light-yellow); }
        .link { color: var(--light-blue); }
    }
    a:hover, a:focus, a:active {
        color: var(--light-blue) !important;
    }
    li:hover, li:focus, li:active,
    p:hover, p:focus, p:active {
        a:link {
            color: var(--light-blue) !important;
        }
        a:visited {
            color: var(--light-purple) !important;
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --red       : var(--light-red);
        --orange     : var(--light-orange);
        --yellow    : var(--light-yellow);
        --green     : var(--light-green);
        --blue      : var(--light-blue);
        --purple    : var(--light-purple);

        --text      : var(--white);
        --subtext   : var(--light-gray);
        --background: var(--black);
    }

    button:hover, button:focus, button:active {
        .folder { color: var(--dark-purple); }
        .command { color: var(--dark-blue); }
        .file { color: var(--dark-yellow); }
        .link { color: var(--dark-blue); }
    }
    a:hover, a:focus, a:active {
        color: var(--dark-blue) !important;
    }
    li:hover, li:focus, li:active,
    p:hover, p:focus, p:active {
        a:link {
            color: var(--dark-blue) !important;
        }
        a:visited {
            color: var(--dark-purple) !important;
        }
    }
}

.date {
    color: var(--orange);
}
.file {
    color: var(--yellow);
}
.folder {
    color: var(--purple);
}
.error {
    color: var(--red);
}
.command {
    color: var(--blue);
}
.link {
    color: var(--blue);
}

@font-face {
  font-family: "JBMono";
  src:
    url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "JBMonoIt";
  src:
    url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NFIcons";
  src:
    url("fonts/SymbolsNFM-subset.ttf") format("truetype");
  font-display: swap;
}
.jb-mono { font-family:"JBMono"; }
.icon { font-family:"NFIcons"; }

/*
 * DEVICE SWITCHES
 */

.disappear-vertical {}
.disappear-mobile {}
.appear-vertical {
    visibility: hidden;
    display: none;
}
.appear-mobile {
    visibility: hidden;
    display: none;
}


html {
    font-size: calc(100vw/51);
}
/* mobile */
@media (hover:none), (pointer:none), (pointer:coarse) {
    .disappear-mobile {
        visibility: hidden;
        display: none;
    }
    span.appear-mobile {
        visibility: visible;
        display: inline;
    }
    .appear-mobile {
        visibility: visible;
        display: block;
    }
}

/* vertical */
@media (max-aspect-ratio: 1/1) {
    html {
        font-size: calc(100vw/21);
    }

    .disappear-vertical {
        visibility: hidden;
        display: none;
    }
    span.appear-vertical {
        visibility: visible;
        display: inline;
    }
    .appear-vertical {
        visibility: visible;
        display: block;
    }
}

.inviz {
    height:     0px;
    width:      0px;
    max-height: 1px;
    max-width:  1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    top: -99px;
    left: 99px;
}

.inviz:hover, .inviz:focus, .inviz:active {
    width:  fit-content;   
    height: fit-content;   
    max-width: 100vw;   
    max-height: 2rem;   
    background: var(--text);
    color: var(--background);
    top: 0;
    left: 0;
    z-index: 10;
}

/*
 * LAYOUTING
 */

.flex-h {
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    margin: 0em 0em;
}

.flex-v {
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    margin: 0em 0em;
}

.fi {
    flex: 1 1 auto;
}

.fi-no-grow {
    flex: 0 1 auto;
}

.fi-no-shrink {
    flex: 1 0 auto;
}

.fi-static {
    flex: 0 0 auto;
}

/*
 * BUILDING BLOCKS
 */

.separator {
    background-color: var(--text);
    width: 100%; 
    height: 0.20rem;
    margin: 1rem 0;
}

#input-container {
    font-family:"JBMono", monospace; 

    z-index: 1;
    position: fixed;
    bottom: 0;
    width: calc(100% - var(--input-padding) * 2);
    height: var(--input-height);
    padding: var(--input-padding);
    display: inline-flex;
    display: inline flex;
    background-color: var(--pure-black);

    pre {
        margin: 0;
        padding 0;
    }

    input {
        color: var(--trans);
        position: fixed;
        bottom: 0rem;
        left:   3rem;
        padding: 0;
        width: calc(100% - 5rem);
        height: 3rem;
        font-size: 1rem;
        background: var(--trans);
        border: 2px var(--text);
        z-index: 2;
    }

    input:focus-visible {
        outline: none;
    }

    #location {
        flex: 0 1 auto;
        bottom: 0;
        width: fit-content;
        height: 1rem;
        color: var(--text);
    }

    #prephase {
        flex: 0 0 auto;
        bottom: 0;
        width:  2rem;
        height: 1rem;
        color: var(--text);
    }
    
    #cursor {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        color: var(--text);
    }

    #prompt {
        flex: 0 1 auto;
        height: 1rem;
        width: fit-content;
        color: var(--text);
    }
}

#input-container:focus-within {
    border-top: 0.2rem solid var(--text);
    padding-top: calc(1rem - 0.2rem);
}

#help, #ls-projects, #ls-articles, #ls-home, #controls {
    ul {
        list-style-type: "";
        margin-top: 0;
        margin-left: 0;
        li:hover, li:focus, li:active {
            color: var(--text);
            background: var(--background);
        }
    }
}

pre.code-block {
    .Comment    {color: var(--subtext)}
    .Constant   {color: var(--peach)}
    .Identifier {color: var(--flamingo)}
    .Keyword    {color: var(--purple)}
    .Number     {color: var(--yellow)}
    .Operator   {color: var(--sky)}
    .PreProc    {color: var(--pink)}
    .Repeat     {color: var(--red)}
    .String     {color: var(--green)}
    .Structure  {color: var(--bright-blue)}
    .Type       {color: var(--blue)}
    
    break-inside: avoid;
    margin-top: 1rem;
}

/*
 * SEMANTIC HTML
 */

/* TODO: fuck focus rings, i can do better */

h1, h2, h3, h4, h5, h6, p, span,
body, div, section, menu, article, pre {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family:"JBMono", monospace; 
}

pre {
    height: fit-content;
    width: fit-content;
}

article {
    margin: 1rem;
    max-width: 80ch;

    p, h1, h2, h3, h4, h5, h6 {
        display: block;
        font-family:"JBMono", monospace; 
        color: var(--text);
        margin-top: 1rem;
    }

    li {
        outline: none;
        display: list-item;
        font-family:"JBMono", monospace; 
        color: var(--text);
    }

    h1, h2, h3, h4, h5, h6 {
        text-decoration: underline;
        margin-top: 1rem;
    }
    h1, h2 {
        text-decoration: none;
    }
    h1 {
        font-weight: bold;
    }

    ul {
        margin-top: 1rem;
        margin-left: 1rem;
        ul {
            margin-top: 0rem;
            margin-left: 2rem;
        }
    }

    h3:hover, h3:focus, h3:active,
    h4:hover, h4:focus, h4:active,
    h5:hover, h5:focus, h5:active,
    h6:hover, h6:focus, h6:active {
        font-weight: bold;
    }

    h1:hover, h1:focus, h1:active,
    h2:hover, h2:focus, h2:active,
    h3:hover, h3:focus, h3:active,
    h4:hover, h4:focus, h4:active,
    h5:hover, h5:focus, h5:active,
    h6:hover, h6:focus, h6:active,
    li:hover, li:focus, li:active,
    span:hover, span:focus, span:active,
    p:hover, p:focus, p:active {
        background: var(--text);
        color: var(--background);
        outline: none;
        
    }
    li::marker {
        color: var(--text);
    }
}

body {
    background: var(--background);
    color: var(--text);
    font-family:"JBMono", monospace; 
    padding-bottom: calc(var(--input-height) + var(--input-padding) * 2);
}

input {
    width: calc(100% - 1rem);
    height: 1.2rem;
    font-family:"JBMono", monospace; 
}

ul {
    list-style-type: "- ";
    margin: 0;
    padding: 0;
}

button {
    font-family:"JBMono", monospace; 
    margin: 0;
    padding: 0;
    background: var(--trans);
    font-size: 1rem;
    color: var(--text);
    outline: none;
    border: none;
    text-align:left;
}

button:hover, button:focus, button:active {
    background: var(--text);
    color: var(--background);
    font-family: "JBMono", monospace;
    font-weight: bold;
    outline: none;
}

a {
    font-family: "JBMonoIt", "JBMono", monospace;
    text-decoration: none;
    font-style: italic;
}

a:after {
    font-family: "NFIcons";
    content: "   ";
}

a:hover, a:focus, a:active {
    background: var(--text);
    font-family: "JBMono", monospace;
    font-style: normal;
    text-decoration: underline;
    outline: none;
}

a:link {
    color: var(--blue);       
}

a:visited {
    color: var(--purple);       
}

/*
 * Printing
 */

@media print {
    form {
        display: none;
        visibility: hidden;
    }
}

@page {
    margin: 2cm 0.5cm 1cm 0.5cm;
}