:root {
    --clr-black: #000;
    --clr-white: #fff;
    --clr-blue: rgba(19, 69, 255, 1);
    --clr-green: rgba(44, 234, 0, 1);
    --clr-orange: rgba(240, 135, 0, 1);
    --clr-purple: rgba(180, 19, 255, 1);
    --clr-red: rgba(234, 0, 33, 1);
    --clr-yellow: rgba(255, 234, 0, 1);

    --clr-light-blue: rgba(19, 69, 255, .09);
    --clr-light-green: rgba(44, 234, 0, .3);
    --clr-light-orange: rgba(240, 135, 0, .3);
    --clr-light-purple: rgba(180, 19, 255, .15);
    --clr-light-red: rgba(234, 0, 33, .15);
    --clr-light-yellow: rgba(255, 234, 0, .3);

    --clr-foreground: var(--clr-black);
    --clr-background: var(--clr-white);
    --clr-accent-1-normal: var(--clr-blue);
    --clr-accent-1-light: var(--clr-light-blue);
    --clr-accent-2-normal: var(--clr-green);
    --clr-accent-2-light: var(--clr-light-yellow);
    --gutter-size: 8px;
    --transition-speed: .5s;
    --link-grow: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    font: 15px/1.4em sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--clr-background);
    color: var(--clr-foreground);
}

header {
    padding: calc(2 * var(--gutter-size)) var(--gutter-size) 0 var(--gutter-size);
}

header > h1 > a {
    color: var(--clr-foreground);
    display: inline-block;
    font-weight: 100;
    margin: 0;
    padding: 0;
    text-decoration: none;
    transition: background-color var(--transition-speed), color var(--transition-speed), margin var(--transition-speed), padding var(--transition-speed);
}

header > h1 > a:hover {
    background-color: var(--clr-accent-1-light);
    color: var(--clr-accent-1-normal);
    margin-left: calc(-1 * var(--link-grow));
    margin-right: calc(-1 * var(--link-grow));
    padding-left: var(--link-grow);
    padding-right: var(--link-grow);
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-size);
    padding: 0 var(--gutter-size) var(--gutter-size) var(--gutter-size);
}

section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

footer {
    display: none;
}

h1 {
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 1.2em;
    min-height: 50px;
    padding: .8rem 0 0 .1rem;
}

h2 {
    font-weight: 100;
    font-size: 1.6rem;
    line-height: 1.2em;
    padding: .8rem 0 0 .1rem;
}

cite {
    font-style: italic;
    padding-right: .1em;
}

.container {
    display: flex;
    flex: 1 1 100%;
    gap: var(--gutter-size);
}