:root {
    --color:#0a0603;
    --background: #231e18;
    
    --link:#bf9442;
    --linkhover:#58cb96;

    --captionlink:#0c5a36;
    --captionlinkhover:#59452a;

    --captionbg:#dacdaa;
    --headercolor:#dacdaa;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#dacdaa;
        --background:#231e18;
        
        --link:#bf9442;
        --linkhover:#58cb96;

        --captionlink:#bf9442;
        --captionlinkhover:#58cb96;
        
        --captionbg:#393025;
    }
}

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

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

main {
    padding:20px;
    width:calc(100% - 40px);
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.image {
    margin:auto;
    flex:0 0 50%;
    text-align:center;
}

.comment {
    flex: 0 0 50%;
}

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

.caption a {
    color:var(--captionlink);
}

.caption a:hover, .caption a:focus {
    color:var(--captionlinkhover);
}

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;
}

main h1 {
    font-size:2em;
    font-weight:normal;
    color:var(--headercolor);
}

.subtitle {
    font-style:italic;
    color:var(--headercolor);
}

.back {
    text-align:center;
}

hr {
    border:1px solid var(--link);
}


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

@media screen and (max-width:799px) {
    .image {
        flex: 0 0 100%;
    }

    .comment {
        flex: 0 0 100%;
    }
}