:root {
    --color:#0a0603;
    --background:#0a0e24;

    --lightcolor:#dcdaba;
    --link:#ffa3a3;
    --linkhover:#bdc5e0;

    --captionbg:#bdc5e0;

    --button:#0b1233;
    --buttonhover:#151f50;
    --buttoncolor:#dcdaba;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#dcdaba;
        
        --captionbg:#0b1233;
    }
}

* { margin: 0; padding: 0; transition: color 0.5s ease, opacity 0.5s ease, background 0.5s ease;}
img { max-width:100%; height:auto; }

body { 
    color:var(--color);
    background: var(--background);
    font: 1rem "Atkinson Hyperlegible", sans-serif; 
    letter-spacing:.35px;
}

main {
    padding:10px;
    width:calc(80% - 20px);
    max-width:700px;
    margin:20px auto 0 auto;
}

.box {
    background:var(--captionbg);
    padding:20px;
    border-radius:3px;
    margin:10px 0 10px 0;
    color:var(--color);
}

.cite {
    font-style:italic;
    text-align:right;
}

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

main a:hover, main a:focus {
    color: var(--linkhover);
}

p {
    margin:10px 0px 10px 0px;
    line-height:1.5;
}

main header {
    text-align:center;
    margin-bottom:20px;
    color:var(--lightcolor);
}

main h1 {
    font:2.5em Georgia, serif;
    font-style:italic;
}

.subtitle {
    color:var(--lightcolor);
}

.hide {
    display: none;
}

.hide:target {
    display:block;
}

nav ul {
    list-style:none;
    text-align:center;
    color:var(--lightcolor);
    font-size:1.2em;
}

nav li {
    display:inline-block;
    padding:2px;
    margin:5px;
}

nav li.active {
    font-weight:bold;
}

a.button {
    display:inline-block;
    margin:auto;
    padding:10px;
    background:var(--button);
    color:var(--buttoncolor);
    text-decoration:none;
    border:1px solid;
}

a.button:hover, a.button:focus {
    background:var(--buttonhover);
    color:var(--buttoncolor);
}

.centered {
    text-align:center;
}

@media screen and (max-width:799px) {
    main {
        width:calc(100% - 20px);
    }
}