/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Page CSS */
@font-face {
    font-family: 'JetBrainsMono-Regular';
    src: url('fonts/jetbrains/JetBrainsMono-Regular.woff2') format('woff2');
}

:root {
    --color-fg: #839395;
    --color-bg: #002833;
    --color-selection-fg: #93a0a0;
    --color-selection-bg: #003440;
    --color-links: #005bbb;

    --color-black: #003440;
    --color-red: #db312f;
    --color-green: #859801;
    --color-yellow: #b48800;
    --color-blue: #268ad1;
    --color-magenta: #d23581;
    --color-cyan: #2aa097;
    --color-white: #eee7d4;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    display: grid;
    font-family: 'JetBrainsMono-Regular', monospace;
    grid-template-columns: minmax(2ch, auto) [main-start] min(80ch, calc(100% - 4ch)) [main-end] minmax(2ch, auto);
    line-height: 1.8em;
    white-space: pre;
}

a {
    color: var(--color-links);
    text-decoration: none;
}

.color-black { color: var(--color-black); }
.color-red { color: var(--color-red); }
.color-green { color: var(--color-green); }
.color-yellow { color: var(--color-yellow); }
.color-blue { color: var(--color-blue); }
.color-magenta { color: var(--color-magenta); }
.color-cyan { color: var(--color-cyan); }
.color-white { color: var(--color-white); }


::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-fg);
}

.terminal {
    align-self: center;
    grid-column: main;
    min-width: 0;
}

.prompt-ok, .prompt-error {
    background-color: var(--color-black);
}
.prompt-ok::before {
    content: ' ';
}
.prompt-error::before {
    color: var(--color-red);
    content: ' ✘ ';
}

.prompt-path {
    background-color: var(--color-blue);
    color: var(--color-bg);
}

.prompt-path::before {
    background-color: var(--color-blue);
    color: var(--color-black);
    content: '';
}
.prompt-path::after {
    background-color: var(--color-bg);
    color: var(--color-blue);
    content: '';
}