@font-face {
    font-family: "Monocraft";
    src: url("fonts/Monocraft/Monocraft.ttf");
}

@font-face {
    font-family: "Monocraft";
    src: url("fonts/Monocraft/weights/Monocraft-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Fira Code";
    src: url("fonts/fira-code/FiraCode-Regular.ttf");
}

@font-face {
    font-family: "Fira Code";
    src: url("fonts/fira-code/FiraCode-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "PT Sans";
    src: url("fonts/pt-sans/PTSans-Regular.ttf");
}

@font-face {
    font-family: "PT Sans";
    src: url("fonts/pt-sans/PTSans-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "PT Sans";
    src: url("fonts/pt-sans/PTSans-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "PT Sans";
    src: url("fonts/pt-sans/PTSans-BoldItalic.ttf");
    font-style: italic;
    font-weight: bold;
}

:root {
    --text-color: rgb(199, 199, 199);
    --title-text-color: white;
    --background-color: black;
    --border-color: rgba(255, 255, 255, 0.7);
    --accent-color: #c27100;
    --secondary-accent-color: #1b5d13;

    --main-area-width: 1000px;
    --main-area-padding-side: min(5vw, 50px);

    --title-font-family: "Monocraft", "Fira Code", monospace;
    font-family: "PT Sans", sans-serif;
    font-variant-ligatures: contextual;

    font-size: 18px;

    background: var(--background-color);
    color: var(--text-color);
}

html, body {
    padding: 0;
    margin: 0;
}

main {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

code, output {
    font-family: "Fira Code", monospace;
    padding-left: 0.75ex;
    padding-right: 0.75ex;
    margin-right: 0.25ex;
    margin-left: 0.25ex;
    border: solid 1px currentColor;
    padding-top: 0.1ex;
    padding-bottom: 0.1ex;
}

h1, h2, h3 {
    font-family: var(--title-font-family);
    font-weight: normal;
    color: var(--title-text-color);
}

:is(h1, h2, h3):not(:first-child) {
    margin-top: 4em;
}

h1 {
    letter-spacing: 0.25ex;
}

h2 {
    font-size: 1.25em;
}

h3 {
    font-size: 1em;
}

p, ul {
    line-height: 1.75;
    margin-bottom: 2em;
}

p:first-of-type {
    margin-top: 2em;
}

a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:visited {
    text-decoration-color: color-mix(in lab, var(--accent-color), black 50%);
}

ul > li::marker {
    content: "-> ";
    font-size: 0.7em;
    font-family: "Monocraft", "Fira Code", monospace;
}