:root {
    --color:#131719;
    --background:#143240;
    
    --link:#135e8e;
    --linkhover:#78654f;

    --captionbg:#d3e0e2;
    
    --title:#d3e0e2;
    --headerlink:#81c1e3;
    --headerlinkhover:#d6bea0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#d3e0e2;
        --background:#143240;
        
        --link:#81c1e3;
        --linkhover:#d6bea0;
        
        --captionbg:#0c212b;
    }
}

* { 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(wavecut.png) fixed var(--background);
    font: 1rem Georgia, serif; 
    letter-spacing:.35px;
}

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

#imagecontainer {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:40px;
}

.image {
    text-align:center;
}

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

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

main header a {
    color:var(--headerlink);
}

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

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 {
    max-width:900px;
    margin:20px auto 20px auto;
}

.back {
    text-align:center;
}

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

@media screen and (max-width:799px) {
    main {
        width:calc(100% - 20px);
    }
    
    #imagecontainer {
        display:block;
    }
    
    .image {
        margin:30px 0 30px 0;
    }
}