:root {
    --color:#c9deff;
    --background:#141c3f;
    --title: #ffd43f;
    
    --link:#ffd43f;
    --linkhover:#fff67f;
    
    --boxbg:#92bcff;
    --boxcolor:#141c3f;
    --border:#ffd43f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#c5d7f0;
        --background:#002046;
        
        --link:#e5b023;
        --linkhover:#ffde46;
        
        --boxbg:#011832;
        --boxcolor:#c9deff;
    }
}

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

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

main {
    padding:10px;
    width:calc(90% - 60px);
    max-width: 800px;
    margin:auto;
    display:flex;
    align-items:center;
}

#main-image {
    height:90vh;
    width:auto;
    --s: 40px;
    --t: 5px; 
    --g: 5px;
    padding: calc(var(--g) + var(--t));
    outline: var(--t) solid var(--border);
    outline-offset: calc(-1*var(--t));
    -webkit-mask: conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

#desc {
    padding:10px;
}

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

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

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

main h1 {
    font:2em Georgia, serif;
    font-style:italic;
    margin:5px 0 5px 0;
    color: var(--title);
}

main .caption {
    background:var(--boxbg);
    padding: 10px;
    border-radius:5px;
    color:var(--boxcolor);
}

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

@media screen and (max-width: 900px) {
    main {
        display:block;
        text-align:center;
        width:calc(100% - 60px);
    }
    
    #main-image {
        height:auto;
        width:calc(100% - 90px);
    }
}