@font-face {
    font-family:"Atkinson Hyperlegible";
    src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"), 
    url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:"Atkinson Hyperlegible";
    src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"), 
    url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:"Atkinson Hyperlegible";
    src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"), 
    url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family:"Atkinson Hyperlegible";
    src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"), 
    url("/assets/fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

:root {
    --background:#d5ccba;
    --color:#20111B;

    --accent1:#494904;
    --accent2:#696904;
    --accent3:#b29c70;
    --accent4:#3c3c02;
    --accent5:#e8d589;

    --backgroundlight: #ebe5d8;
    --backgrounddark: #cac09e;

    --header:var(--accent4);

    --link:var(--accent4);
    --linkbg:var(--accent2);
    --linkhover:var(--backgroundlight);

    --hr:var(--accent2);
    --highlight:var(--accent5);

    --formcolor:var(--accent4);
    --formbg:var(--background);

    /* FONTS */
    --bodyfont:"Atkinson Hyperlegible", sans-serif;
    --headerfont: Georgia, serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background:#1c1815;
        --color:#dedec0;

        --accent1:#929a6c;
        --accent2:#777741;
        --accent3:#465224;
        --accent4:#b2b97a;
        --accent5:#492c06;

        --backgroundlight: #090909;
        --backgrounddark: #2f241a;
    }

    img {
        opacity:0.7;
    }

    img:hover {
        opacity:1;
    }
}

@media (prefers-color-scheme:light) {
    a:hover img { opacity: 0.7; }
}

* { margin:0; padding:0; transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease; scrollbar-color: var(--accent2) var(--backgrounddark);}
img { margin:2px; max-width: 100%; height:auto; }

body {
    background:var(--background);
    font:1.2em var(--bodyfont);
    line-height:1.5;
    letter-spacing:0.5px;
    color:var(--color);
}

#container {
    margin:10px auto 0 auto;
    padding:15px;
}

/* HEADER */

#menu-bar {
    font:1.1em var(--headerfont);
}

#main-navigation li {
    list-style:none;
    display:inline-block;
}

#main-navigation a {
    display:inline-block;
    color:var(--header);
    text-decoration:none;
    border-bottom:1px dotted;
}

#main-navigation a:hover, #main-navigation a:focus {
    font-style:italic;
}

/* CONTENT */

main {
    padding:10px;
    margin-top:20px;
}

main p {
    margin:0.6em 0 0.6em 0;
}

main a {
    color:var(--link);
    text-decoration-color:var(--linkbg);
}

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

main h1 {
    font:2em var(--headerfont);
    font-style:italic;
    margin:5px 0 5px 0;
}

main h2 {
    font:1.7em var(--headerfont);
    margin:15px 0 10px 0;
}

main h3 {
    font:1.4em var(--headerfont);
    margin:15px 0 10px 0;
}

main h4, .postmeta {
    font:0.9em var(--headerfont);
    font-style:italic;
    margin:5px 0 20px 0;
    line-height:1.5;
}

main ul, ol { 
    list-style-position: outside;
}

main li {
    margin:5px 0px 5px 30px;
}

main blockquote, main .indent {
    margin-left:30px;
    margin-right:30px;
}

main summary {
    cursor:pointer;
    margin: 5px 0px 5px 0px;
}

main details {
    padding:8px;
    background:var(--backgrounddark);
    margin:5px 0 5px 0;
    border-radius:5px;
}

main hr {
    border:0.5px solid var(--hr);
    margin:20px;
}

main pre {
    max-height:350px;
    overflow:auto;
    padding:10px;
    background:var(--backgrounddark);
    border-radius:5px;
    margin:auto;
    font-size:1.05rem;
    max-width:900px;
    width:80%;
}

main input, textarea, select, button { 
    background: var(--formbg);  
    color: var(--formcolor);
    font: 1em var(--bodyfont); 
    border: 1px solid var(--hr); 
    padding: 5px; 
    margin: 5px;
}

/* FOOTER */

#main-footer {
    text-align:center;
    font-size:0.9em;
    border-top:1px solid var(--hr);
    margin-top:20px;
    padding-top:20px;
}

/* FLEX AND GRID */

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    margin:auto;
}

.galleryitem {
    text-align:center;
    padding:5px;
    font-size:0.95em;
}

/* STYLES */

.box-darker {
    background:var(--backgrounddark);
    border-radius:5px;
    padding:10px;
    margin:15px 0 15px 0;
}

.box-border-dotted {
    border:1px dotted var(--hr);
    padding:10px;
    margin:15px 0 15px 0;
}

.box-smaller {
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
}

ul.nobullets {
    list-style:none;
}

ul.nobullets li {
    margin: 5px 0 5px 0;
}

ul.inline li {
    display:inline-block;
}

.btn {
    padding:10px;
    text-decoration:none;
    border:1px solid var(--accent2);
    margin:0.5em;
    display:inline-block;
    color:var(--color);
}

.btn:hover {
    background:var(--accent1);
    color:var(--backgroundlight);
}

.bottomborder {
    border-bottom:2px solid var(--accent2);
    padding: 0 0 10px 0;
    margin: 1.5em 0 1.5em 0;
}

.bottomborder:last-of-type {
    border:none;
    padding:0;
}

.larger {
    font-size:1.2em;
}

.smaller {
    font-size:0.9em;
}

.imagelinks a:hover, .imagelinks a:focus {
    background:none;
}

/* COMMENTS */

.comment {
    padding:15px;
    margin:20px auto 20px auto;
    border:1px dotted var(--hr);
}

.admin {
    background: var(--backgrounddark);
}

.commentbody {
    padding:15px;
}

.name {
    font:1.5em var(--headerfont);
    margin-bottom:5px;
}

.comment footer {
    font-family:var(--headerfont);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.name .admin {
    font-size:0.8em;
}

.name .commented {
    font-size: 0.6em;
}

.meta {
    font-size:0.9em;
    font-style:italic;
    text-align:right;
}

.meta a {
    text-decoration:none;
}

.meta a:hover, .meta a:focus {
    color:var(--linkbg);
    text-decoration:underline;
    background:none;
}

/* COMMENT FORM */

#commentform {
    padding:10px;
    border:1px dashed var(--hr);
}

#commentform textarea {
    width:calc(100% - 20px);
}

#commentform input {
    width: 190px;
}

#commentform .top {
    display:flex;
    flex-wrap:wrap;
}

#commentform .top div {
    flex: 1 1 30%;
}
 
#commentform .bottom {
    margin-top:10px;
}

#commentform button, #commentform input[type="submit"] {
    color:var(--color);
    background:var(--background);
    padding:10px;
    border:1px solid var(--accent2);
}

#commentform button:hover, #commentform input[type="submit"]:hover {
    background:var(--linkbg);
    color:var(--backgroundlight);
    cursor:pointer;
}

/* BLOG STUFF */

ul.pages {
    list-style:None;
    margin:auto;
    text-align:center;
}

ul.pages li { display:inline; margin:0; }

ul.pages li a, ul.pages li.active {
    font-size: 1.2rem; 
    border: 1px solid var(--hr); 
    padding:5px;
    margin:2px;
    transition:0.5s ease;
    text-decoration:none;
}

ul.pages li.page a:hover {
    background:var(--formcolor);
    color:var(--formbg);
    transition:0.5s ease;
}

ul.pages li.page a {
    background: var(--formbg);  
    color: var(--formcolor);
}

ul.pages li.active {
    background:var(--formcolor);
    color:var(--formbg);
}

#nextprev {
    display:flex;
    padding:10px;
    margin-top: 1.4rem;
    align-items:center;
}

#nextprev a {
    text-decoration:none;
}

.next {
    text-align:right;
    flex:0 1 calc(40% - 10px);
    padding-left:5px;
}

.prev {
    text-align:left;
    flex:0 1 calc(40% - 10px);
    padding-right:5px;
}

.archive {
    text-align:center;
    flex:0 1 20%;
}

.tag {
    display:inline-block;
    margin:0 .4em 0 0;
}

/* FOOTNOTES */

article {
    counter-reset: footnotes;
}

.footnotes {
    font-size:0.95em;
}

.footnotes a {
    text-decoration:underline;
}

a[aria-describedby="footnote-label"] {
    counter-increment: footnotes;
    color: var(--color) !important;
    cursor: default;
    text-decoration:none !important;
}

a[aria-describedby="footnote-label"]:hover {
    background:none;
    cursor:default;
}

a[aria-describedby="footnote-label"]:focus {
    background: var(--highlight);
}

a[aria-describedby="footnote-label"]::after {
    content: '[' counter(footnotes) ']'; 
    vertical-align: super;
    font-size: 10pt;
    margin-left: 2px;
    text-decoration: underline;
    cursor: pointer;
    color: var(--link);
}

.footnotes :target {
    background: var(--highlight);
}

/* EXTRAS */

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

.visually-hidden {  
    position: absolute;
    clip: rect(0 0 0 0);
    visibility: hidden;
    opacity: 0;
}

@media screen and (max-width:799px) {
    body {
        font-size:1.15em;
    }

    #menu-bar header {
        background:var(--header);
        height:150px;
        width:150px;
        mask-image:url(/assets/logo.svg);
        -webkit-mask-image:url(/assets/logo.svg);
        mask-size:150px;
        -webkit-mask-size:150px;
        margin: auto auto 20px auto;
    }

    #menu-bar header:hover {
        background:var(--accent2);
    }

    #menu-bar #logo {
        display:none;
    }

    #main-navigation ul {
        display:flex;
        justify-content:space-evenly;
        flex-wrap:wrap;
        gap:5px;
    }

    #main-navigation li {
        padding:2px;
    }
 
    .flexcontainer > section, .flexcontainer > div {
        padding:10px 0 10px 0;
    }
}

@media screen and (min-width:800px) {
    #container {
        width:90%;
        max-width:1000px;
    }

    /* HEADER */

    #menu-bar {
        font-size:1.2em;
    }

    #menu-bar #logo {
        background:var(--header);
        height:175px;
        width:175px;
        mask-image:url(/assets/logo.svg);
        -webkit-mask-image:url(/assets/logo.svg);
        mask-size:175px;
        -webkit-mask-size:175px;
        margin:0 20px 0 20px;
    }

    #menu-bar #logo:hover {
        background:var(--accent2);
    }

    #main-navigation {
        display:flex;
        justify-content:center;
    }

    #main-navigation ul {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        flex:0 0 30%;
    }

    #main-navigation li {
        width:100%;
    }

    #main-navigation ul.left {
        text-align:right;
    }

    #main-navigation ul.right {
        text-align:left;
    }

    /* FLEX AND GRID */

    .flexcontainer {
        display:flex;
        flex-wrap:wrap;
        margin:20px 0 20px 0;
        gap:20px;
    }

    .full { flex: 1 1 calc(100% - 20px);}
    .half { flex: 1 1 calc(50% - 60px); }
    .third { flex: 1 1 calc(33% - 60px); }
    .twothird { flex: 1 1 calc(66% - 60px); }
    .quarter { flex: 1 1 calc(25% - 60px); }
    .threequarter { flex: 1 1 calc(75% - 60px); }

    .artgallery {
        column-count:3;
    }

    /* STYLES */

    .topborder {
        border-top:2px solid var(--accent2);
        padding:10px 0 0 0;
    }
}