.crimson {
    --img: url("/images/marbling/crimson.png");
    --white: #fff;
    --black: #000;
    --bg1: #ece2c0;
    --bg2: #a72c53;
    --hi1: #f0af64;
    --hi1-alt: #e7d7c4;
    --hi2: #37ccc0;
    --hi2-alt: #9dc2bf;
    --lo1: #1d4622;
}

.forest {
    --img: url("/images/marbling/forest.png");
    --white: #fff;
    --black: #000;
    --bg1: #f5e9d7;
    --bg2: #0c3834;
    --hi1: #ffe881;
    --hi1-alt: #ebe4c9;
    --hi2: #47d3f7;
    --hi2-alt: #9db9c2;
    --lo1: #1d4622;
}

.hellrain {
    --img: url("/images/marbling/hellrain.png");
    --white: #fff;
    --black: #000;
    --bg1: #e8d7bc;
    --bg2: #112163;
    --hi1: #fabe6a;
    --hi1-alt: #dbcab2;
    --hi2: #ff4d50;
    --hi2-alt: #a38182;
    --lo1: #1d4622;
}

.jade {
    --img: url("/images/marbling/jade.png");
    --white: #fff;
    --black: #000;
    --bg1: #f9f5c9;
    --bg2: #a12b2c;
    --hi1: #9bffca;
    --hi1-alt: #d3d3d3;
    --hi2: #fabe6a;
    --hi2-alt: #dbcab2;
    --lo1: #1d4622;
}

.jupiter {
    --img: url("/images/marbling/jupiter.png");
    --white: #fff8e7;
    --black: #000;
    --bg1: #fff8e7;
    --bg2: #3190b8;
    --hi1: #ff7c0b;
    --hi1-alt: #ff7c0b;
    --hi2: #fdb977;
    --hi2-alt: #b96a54;
    --lo1: #1d4622;
}

.zebra {
    --img: url("/images/marbling/zebra.png");
    --white: #fff;
    --black: #000;
    --bg1: #f3f7e0;
    --bg2: #30312a;
    --hi1: #71ff84;
    --hi1-alt: #c4e4c8;
    --hi2: #ff7eff;
    --hi2-alt: #c09ac0;
    --lo1: #1d4622;
}

body {
    background-image: var(--img);
}

header > h1 {
    margin: 0;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 4rem;
    color: var(--white);
}

header {
    font-size: 2rem;
    color: var(--bg1);
    text-align: center;

    margin-bottom: 2rem;
    padding: 1rem;
    border-width: 5px;
    border: 2px solid var(--bg1);
    outline: 4px solid var(--bg2);
    background-color: var(--bg2);
}

header > nav a {
    color: var(--hi1);
}
/* 
header > nav a:hover,
header > nav a:visited:hover {
    color: var(--white);
} */

header > nav a:focus,
header > nav a:visited:focus {
    color: var(--hi2);
}

header > nav a:visited {
    color: var(--hi1-alt);
}

header > nav ul {
    margin: 0;
    padding: 0;
}

header > nav ul > li {
    margin: 0 1rem;
    display: inline-block;
    list-style: none;
}

header > nav ul > li::before {
    display: inline-block;
    content: "[";
}

header > nav ul > li::after {
    display: inline-block;
    content: "]";
}

article {
    margin: 0 auto;
    padding: calc(1vw + 1em);
    max-width: 40rem;

    border-width: 5px;
    border: 8px double var(--bg2);
    outline: 5px solid var(--bg2);
    background-color: var(--bg1);
}

article > *:first-child {
    margin-top: 0;
}