:root {
    --color:#131819;
    --background:#8e8d83;
    
    --link:#383f08;
    --linkhover:#6c7123;

    --captionbg:#dad8cf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#dad8cf;
        --background:#101110;
        
        --link:#a9a951;
        --linkhover:#cdcd71;
        
        --captionbg:#171b1a;
    }
}

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

body { 
    color:var(--color);
    background:url(soft-wallpaper.png) fixed var(--background);
    font: 1rem 'Atkinson Hyperlegible', sans-serif; 
    letter-spacing:.35px;
}

main {
    padding:10px;
    width:calc(80% - 60px);
    margin:auto;
}

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

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

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

main h1 {
    font-size:1.4em;
    margin:5px 0 5px 0;
    font-style:italic;
    font-weight:bold;
}

main h1 .year {
    font-style:normal;
    font-weight:normal;
}

main .author {
    font-size:1.1em;
    font-weight:bold;
}

#main-image {
    box-shadow:1px 2px 4px rgb(0,0,0,0.4);
}

#desc {
    width:50%;
    background:var(--captionbg);
    padding:20px;
    margin-top:10px;
    box-shadow:1px 4px 4px rgb(0,0,0,0.4);
}

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

@media screen and (max-width:500px) {
    main {
        width:calc(100% - 20px);
    }
    #desc {
        width:calc(100% - 40px);
    }
}