:root {
    --gold  : #eeaa11;
    --red   : #bb6655;
    --green : #519872;
    --black : #111111;
    --white : #eeeeee;
    --gray  : #888;
}

html { font-size : 20px; line-height : 1.4; font-family : serif; }

body {
    margin : 3rem auto;
    background-color : var(--black);
    color : var(--white);
    max-width : min(64ch, 90vw);
    text-align : justify;
    hyphens : auto !important;
}

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

p, dd, dt { hyphens : auto; }

.block { margin : 1em 0; p, ul, ol { margin : 0; } }

.center > * { display : block; margin : 0 auto !important; }

* { box-sizing : border-box }

pre {
    border-left: 2px solid var(--gray);
    padding : 0.5em;
}

header {
    font-family : sans-serif;
    * { margin : 0 };
    a {
        text-decoration : none;
        &:hover, &:focus, &:active {
            text-decoration : underline;
        }
    }
    nav {
        font-size : 1.1rem;
        display : flex;
        justify-content : space-between;
        align-items : end;
        flex-wrap : wrap;
        h1 {
            text-align : center;
            font-size : 1.5rem;
            a { color : var(--gold); }
        }
        ul { padding : 0; }
        li { display : inline; }
        li:not(:last-child)::after { color : var(--red); content: " │ "; }
    }
    hr { margin : 0.2em 0; }
}

/* generic styling (homepage, blog) */

h1, h2, h3, h4, h5, h6 { font-family : sans-serif; }
h1 { text-align : center; }

.project {
    display : flex;
    margin : 1.2em 0;
    align-items : center;
    padding : 0.5em;
    color : var(--white);
    background-color : var(--black);
    text-decoration : none;
    border-radius : 3px;
    &:hover, &:focus, &:active, &:focus-visible { outline : 2px solid var(--red); }
    img { display : inline-block; margin-right : 1em; }
    div {
        h3 { margin : 0; margin-bottom : 0.4em; }
        p { margin : 0; }
    }
}

/* Custom stuff for Mark Zero */
.red { color : var(--red); }
.flex { 
    display : flex;
    justify-content : space-around; 
}
.footnote {
    display : flex;
    .block { margin : 0; width : 100%; }
}
.center {
   > * {
      margin-left : auto;
      margin-right : auto;
   }
}