:root {
    --highlight: #ffffff;
    --bg: #1e1e1e;
    --text: #cccccc;
    --link: #80ae58;

    --space-none: 0px;
    --space-nudge: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 96px;
    --fullwidth: 1150px;

    --border: 1px solid var(--highlight);

    color-scheme: light dark;
}

html {
    color: var(--text);
    padding: var(--space-none);
    margin: var(--space-none);
    max-width: 100%;

    font-family: 'Xanh Mono', 'monospace';
    font-weight: 500;
    font-optical-sizing: auto;
    font-style: normal;

    strong {
        font-weight: 700;
    }

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

body {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('assets/background.webp');
    background-size: cover;

    margin: var(--space-none);
    padding: var(--space-none);

    /* the body is the whole viewport */
    height: 100vh;
    display: flex;
    flex-direction: column;

    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-image: url('assets/grain.svg');
        opacity: 0.2;
        mix-blend-mode: color-burn;
        pointer-events: none;
    }
}

h1,
h2,
h3 {
    color: var(--highlight);
    font-weight: 700;
}

p {
    font-size: 16pt;
}

.pageheader {
    position: sticky;
    top: 0px;
    z-index: 9999;
    background-color: var(--bg);
    opacity: 88%;
}

.titlebox {
    padding: var(--space-sm);
    border-bottom: var(--border);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    & > * {
        flex: 1;
    }
}

.pagenav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    & > ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;

        & > li:not(:last-child)::after {
            content: '|';
            margin: var(--space-none) var(--space-nudge);
        }
    }

    a {
        text-decoration: none;

        ::visited {
            color: var(--link);
        }

        &.pagenav-curr {
            color: var(--highlight);
        }
    }
}

.gutters {
    /* this is the vertical flex container */
    padding: var(--space-none) var(--space-2xl);

    & > div {
        width: 100%;
        max-width: var(--fullwidth);
        margin: var(--space-sm) var(--space-none);
    }

    flex: 1; /* this flexes to fill, because it needs to get the content in the middle of the page */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* util class to get a flex row */
.rowbox {
    display: flex;
    flex-direction: row;
}

.content {
    position: relative;
    flex: 1;

    padding: var(--space-md);

    background: var(--bg);
    border: var(--border);
    opacity: 88%;

    h1 {
        margin: var(--space-sm) var(--space-none);
    }
}

.postscript {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;

    font-family: 'Sometype Mono', 'monospace';
    font-weight: 400;
    color: var(--bg);
    background-color: var(--text);

    opacity: 88%;
    & > span {
        margin: var(--space-sm);
    }

    a {
        color: var(--bg);
    }
}