/* universal & variables */
            html{
                --fg: white;
                --bg: #5E0A2B;
                --pg: black;
                --lc: red;
                --hw: 600;
                --kr: 0.15;
                color: var(--fg);
                background: var(--pg);
                font-family: "Crimson Text", serif;
                font-optical-sizing: auto;
                font-size: 20px;
                width: 100vw;
                overflow-x: hidden;
                min-height: 100vh;
            }
            html:has(input#mode:checked){
                --fg: black;
                --bg: #FFF1E0;
                --pg: linear-gradient(180deg,rgba(250, 189, 173, 1) 17%, rgba(255, 247, 235, 1) 100%);
                --lc: gray;
                --kr: 0.09;
            }
            i{
                font-style: italic;
            }
            b{
                font-weight: var(--hw);
            }
            /* block elements */
            body{
                max-width: 45rem;
                margin: 1.2rem auto;
                background: var(--bg);
                border: 1px solid var(--fg);
                outline: 7px solid var(--bg);
            }
            #nav {
                display: flex;
                flex-basis: auto;
                flex-direction: row;
                background: var(--bg);
                z-index: 999;
            }
            #nav li{
                position: relative;
                flex-grow: 0;
                height: 1.5rem;
                padding: .8rem 0 .3rem;
                border: 1px solid var(--fg);
                border-top: 0;
                border-right: 0;
                text-align: center;
                font-variant: small-caps;
                background: var(--bg);
                &:first-child{
                    border-left: 0px;
                    flex-grow: 5;
                    text-align: left;
                }
                &:last-child{
                    border-right: 0px;
                }
            }
            #nav li a, #nav li label{
                cursor: pointer;
                text-decoration: none;
                color: var(--fg);
                padding: .75rem;
                &:hover{
                    color: var(--lc);
                }
            }
            li a.dropper:after{
                display: inline-block;
                content: "⁝";
                margin-left: .35rem;
            }
            li:hover .dropdown, .dropdown:hover{
                visibility: visible;
            }
            .dropdown{
                display: grid;
                grid-template-columns: repeat(1, auto);
                visibility: hidden;
                position: absolute;
                top: calc(1.5rem + 2px);
                left: -1px;
                right: -1px;
                margin-top: 1rem;
                text-align: left;
                z-index: 999;
                min-width: 25vw;
            }
            .dropdown a{
                width: fit-content;
                margin: 0;
                border: 1px solid var(--fg);
                background-color: var(--bg);
                &:not(:first-child){
                    margin-top: -1px;
                }
            }
            /* page body + anchor logic */
            section{
                max-width: 100%;
                padding: 1.25rem;
                display: none;
                grid-template-columns: 16ch 1fr;
                grid-column-gap: 1rem;
                counter-reset: notes 0;
                min-height: 10rem;
                background: var(--bg);
                overflow: hidden;
            }
            .post{
                border-top: 1px solid var(--fg);
                padding-top: 1rem;
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: 16ch 1fr 16ch;
                grid-column-gap: 1rem;

            }
            .post .header{
                display: block;
                margin-bottom: 1rem;
                cursor: pointer;
                grid-column: 1;
                height: 1rem;
            }
            .post div.cover{
                grid-column: 3;
            }
            div.cover img{
                margin-bottom: 1rem;
            }
            .header:after{
                content: " ↘";
                opacity: 50%;
            }
            .header:has(input:checked):after{
                content: " ↖";
            }
            .post *:not(.header){
                display: none;
                grid-column: 2;
            }
            .post:has(input:checked) *:not(.header){
                display: block;
            }
            .post input{
                position: absolute;
                width: 0;
                height: 0;
            }
            body:not(body:has(section > *:target)) section.default{
                display: grid;
            }
            section:has(*:target){
                display: grid;
            }
            flag{
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
            }
            /*paragraph styles*/
            h1{
                font-family: "UnifrakturMaguntia", cursive;
                font-size: 3em;
                margin-left: -6px;
                letter-spacing: -1.0;
                grid-column: 1;
                margin-bottom: -100%;
            }
            h1 + p:first-letter, .header + p:first-letter{
                font-family: "UnifrakturMaguntia", cursive;
                float: left;
                margin: 3px 4px -6px 0;
                font-size: 2.8rem;
                vertical-align: text-top;
            }
            rule{
                grid-column: 2;
                height: 1px;
                border-top: 1px solid var(--fg);
                width: 100%;
                margin-bottom: 0.5em;
                counter-reset: notes 0;
            }
            h2, .post label{
                font-size: 1em;
                font-weight: bold;
                margin-bottom: 1rem;
            }
            h1 + *{
                margin-top: 0.2em;
            }
            section p, section ul, h2{
                grid-column: 2;
                letter-spacing: var(--kr);
                max-width: 56ch;
                line-height: 1.3;
                margin-bottom: 1rem;
            }
            section p + ul{
                margin-top: -.5rem;
            }
            section ul{
                list-style: square;
                padding: 0 1em;
            }
            section ul li:not(:first-child){
                margin-top: .5em;
            }
            section a{
                color: var(--fg);
                text-decoration: underline;
                &:hover{
                    color: var(--lc);
                }
            }
            a[href*="https"]:after{
                display: inline-block;
                content: " ↗";
                text-decoration: none;
            }
            .imgframe{
                grid-column: 2;
                width: 33em;
                perspective: 2000px;
            }
            img{
                display: block;
                width: 100%;
                height: auto;
            }
            .imgframe p{
                display: block;
                width: min-content;
                background-color: var(--bg);
                font-size: 80%;
                font-style: italic;
                padding: .5rem 0 .5rem 0;
                white-space: nowrap;
                line-height: 1.3;
            }
            html:has(input:checked) .imgframe p{
                font-weight: 500;
            }
            footer{
                grid-column: 1/2;
                padding: 1rem;
                border-top: 1px solid var(--fg);
                font-size: 80%;
                background: var(--bg);
            }
            input#mode{
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }
            label:has(input#mode){
                width: 12em;
                cursor: pointer;
                user-select: none;
            }
            label:has(input#mode):before{
                content: "Light ";
            }
            input:hover:label{
                color: var(--lc);
            }
            label:has(input#mode:checked):before{
                content: "Dark ";
            }
            .note{
                display: inline;
                font-size: 80%;
                vertical-align: top;
                margin-left: 0.2em;
                cursor: pointer;
                position: relative;
            }
            .note:before{
                counter-increment: notes;
                content: "["counter(notes)"]";
            }
            .note > q{
                visibility: hidden;
                display: flex;
                pointer-events: none;
                position: absolute;
                bottom: 0%;
                left: 100%;
                width: 30vw;
                padding-top: 0.5em;
                pointer-events: auto;
                cursor: auto;
                z-index: 999;
            }
            .note:hover > q{
                visibility: visible;
            }
            .note > q > q{
                position: relative;
                flex-shrink: 2;
                background: var(--bg);
                outline: 9px solid var(--bg);
                border: 1px solid var(--fg);
                padding: 0.5rem;
                max-width: 20ch;
            }
            html:has(input:checked) .note > q > q{
                font-weight: 500;
                outline: 5px solid var(--bg);
            }
            /*phone*/
            @media (max-width: 54rem){
                #nav{
                    border-bottom: -1px;
                    width: calc(100vw - 1rem);
                    border-bottom: 1px solid var(--fg);
                    background-color: var(--pg);
                }
                #nav li{
                    margin-bottom: -1px;
                    flex-grow: 2;
                    flex-shrink: 2;
                    font-size: 1rem; 
                    white-space: nowrap;
                    height: 1.25rem;
                    &:first-child{
                        display: none;
                    }
                    &:nth-child(2){
                        border-left: 0;
                    }
                    &:last-child{
                        border-right: 0;
                    }
                }
                #nav a, #nav label{
                    padding: 1rem .75rem;
                    &:hover{
                        color: var(--lc);
                    }
                    font-size: max(3.5vw, 1rem);
                }
                label:has(input#mode){
                    width: auto;
                    padding: .5rem;
                    cursor: pointer;
                    user-select: none;
                }
                .dropdown{
                    display: grid;
                    grid-template-columns: repeat(1, auto);
                    visibility: hidden;
                    position: absolute;
                    top: calc(1.5rem - 2px);
                    left: -1px;
                    right: -1px;
                    margin-top: 1rem;
                    text-align: left;
                    width: 50vw;
                }
                .dropdown a{
                    margin: 0;
                    height: auto;
                    border: 1px solid var(--fg);
                    background-color: var(--bg);
                    border-top: 0;
                    white-space: wrap;
                    &:first-child{
                        border-top: 0;
                    }
                }
                body{
                    margin: .5rem;
                    border: 0;
                    font-size: 17px;
                    width: calc(100vw - 1rem);
                    border: 1px solid var(--fg);
                }
                section{
                    padding: 1rem;
                    grid-template-columns: 100%;
                }
                h1{
                    margin: 0 0;
                }
                section p, section ul, section li, .post{
                    grid-column: 1;
                    width: 90%;
                }
                .imgframe{
                    grid-column: 1;
                    width: 100vw;
                    margin: 0 -1rem;
                }
                .imgframe img{
                    border: 0;
                }
                .imgframe p{
                    border-left: 0;
                    padding-left: 1rem;
                    margin-top: 0;
                }
                .note > q > q{
                    left: -15vw;
                    width: 30vw;
                }
                footer{
                    border-bottom: 1px solid var(--tx);
                }
            }