CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* VARIABLES */
:root {
    --main-fg-color: black;
    --main-bg-color: white;
    --warning-bg-color: red;
}

/* LAYOUT */
body {
    max-width: 960px;
    margin: auto;
    margin-top: 2rem;
}

.header {
    display: flex;
    flex-wrap: wrap;
}

.menu {
    margin-left: auto;
    text-align: right;
}

.menu p {
    margin: 0;
}

h1 {
    flex-basis: 100%;
}

.logo {
    width: 50vmin;
    height: auto;
}

.content,
.footer {
    padding: 0 1rem;
}

@media screen {
    .footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
        color: var(--main-bg-color);
        background: var(--main-fg-color);
    }

    .definition {
        color: white;
        background: var(--warning-bg-color);
    }

    .footer hr {
        display: none;
    }
}

/* TYPOGRAPHY */
html {
    line-height: 1.4;
    font-size: 20px;
}

body {
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; 
}

pre {
    font-family: monaco,Consolas,Lucida Console,monospace;
    font-size: 16px;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
}

.content a.edit {
    color: red;
    font-weight: bold;
}

h1,
h2 {
    border-bottom: 1px solid var(--main-fg-color);
}

h1 a,
h2 a {
    text-decoration: none;
}

/* COMPONENTS */
.cal .local:not(.month) {
    color: var(--main-bg-color);
    background: var(--main-fg-color);
}