:root {
    --color:#0a0603;
    --background:url(green-cup.png) fixed #ebe0c1;
    
    --link:#16543a;
    --linkhover:#6f310f;

    --captionbg:#ded3b4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#ebe0c1;
        --background:url(low-contrast-linen.png) fixed #2b2314;
        
        --link:#e8c96f;
        --linkhover:#8cd0f5;
        
        --captionbg:#1f190e;
    }
}

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

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

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

.image {
    margin:auto;
    width:100%;
    max-width:800px;
}

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

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

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

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

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

main h1 {
    font-size:2.5em;
    font-weight:normal;
}

main h2 {
    font-size:1.6em;
    font-weight:normal;
    text-align:center;
}

.subtitle {
    font-style:italic;
}

.comment {
    margin:20px auto 20px auto;
}

.back {
    text-align:center;
}

hr {
    border:.5px solid var(--link);
    opacity:0.3;
}

@media (prefers-color-scheme: dark) {
    img {
        opacity:0.9;
    }
    
    img:hover {
        opacity:1;
    }
}

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