/* MAIN */
:root {
    --bkg:#000;
    --txt-clr:#fff;
    --fnt-size:1.2rem;
    --sel-h:#b00;
    --t-time:.5s;
    --a-unvis:#8af;
    --a-vis:#a8f;
    --a-actv:#f88;
    --fnt-small:.8rem;
    --topbar-height:5rem;
}
body {
    background:var(--bkg);
    margin:0;
}
/* ACCESSIBILITY */
*:focus-visible {
    outline:3px solid var(--sel-h);
}
.click-img-zoom:focus-visible+label {
    outline:3px solid var(--sel-h);
}
@media (prefers-reduced-motion) {
    :root {
        --t-time:0s;
    }
}
@media (prefers-contrast: more) {
    :root {
        --a-unvis:#acf;
        --a-vis:#caf;
        --a-actv:#fcc;
    }
}
/* HEADER */
header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--bkg);
    height:var(--topbar-height);
}
/* Navigation styles */ 
a.skip {
    position:fixed;
    left:-20rem;
    top:1rem;
    font-size:1.5rem;
    background:var(--bkg);
    
}
a.skip:focus-visible {
    left:1rem;
}
#navbar {
    width:95%;
    max-width:60rem;
    margin:1rem auto 2rem;
    display:flex;
    justify-content:space-evenly;
}
#navbar>span { /* compatibility with browsers that do not support flexbox */
    display: inline-block;
    width: 24%;
    text-align: center;
}
/* CONTENT */
article#body {
    width:95%;
    max-width:60rem;
    background:var(--bkg);
    margin:auto;
    margin-top:var(--topbar-height);
}
/* Main text styles */
h1.page-header {
    text-align:center;
    color:var(--txt-clr);
    margin-bottom:0;
}
.subheading {
    text-align:center;
    color:var(--txt-clr);
}
p {
    width:80%;
    margin:.5rem auto;
    text-align:justify;
    text-indent:2rem;
    color:var(--txt-clr);
    font-size:var(--fnt-size);
}
text {
    margin:.5rem auto;
    color:var(--txt-clr);
    font-size:var(--fnt-small);
}
/* Link styles */
a {
    font-size:var(--fnt-size);
    color:var(--a-unvis);
}
a:hover {
    text-decoration:none;
}
a:visited {
    color:var(--a-vis);
}
a:active {
    color:var(--a-actv);
}
text>a {
    font-size:var(--fnt-small);
}
a[target="_blank"]::after {
    content:" ⤤";
}
/* Codeblock styles */
div.codeblock {
    border:2px solid #333;
    border-radius:.5rem;
    width:80%;
    margin:.8rem auto;
    overflow-x:auto;
}
div.codeblock>code>pre {
    padding:.5rem;
    font:monospace;
    color:var(--txt-clr);
    font-size:var(--fnt-size);
}
/* hr stylse */
hr {
    width:70%;
    max-width:60rem;
    margin:2rem auto 2rem auto;
    border:none;
    border-top:.3rem ridge #fff;
}
header>hr {
    margin-top:-1rem;
}
/* List styles */
article>ul {
    width:70%;
    margin:auto;
}
ul {
    color:var(--txt-clr);
    font-size:var(--fnt-size);
    list-style-type: disc;
}
ul ul {
    list-style-type: circle;
}
ul ul ul {
    list-style-type: disc;
}
ul ul ul ul { /* If I ever nest more than four lists... well... */
    list-style-type: circle;
}
/* FOOTER */
footer {
    width:70%;
    max-width:60rem;
    margin:auto;
    display:flex;
    justify-content:stretch;
}
footer>div {
    display:inline-block;
    width:49%; /* fallback for if a browser doesn't support flexboxes */
}
/* IMAGE CONTAINER */
.img-copynotice {
    text-align:center;
    max-width:80%;
    margin:auto;
}
.click-img {
    width:80%;
    transition:width .5s,border-radius .5s;
}
@media (min-width: 35rem) {
    .click-img {
        width:40%;
        cursor:zoom-in;
    }
    .click-img-zoom:checked+label {
        cursor:zoom-out;
    }
}
.click-img-container {
    width:100%;
    display:flex;
    justify-content:space-evenly;
}
.click-img>img {
    width:100%;
    border-radius:5%;
}
.click-img-zoom {
    position:absolute;
    left:0;
    transform:translateX(-20px);
    opacity:0;
}
.click-img-zoom:checked+label {
    width:80%;
}