:root {
    --article-minwidth: 500px;
    --article-maxwidth: 650px;
}

#width-container {
    max-width: 1200px;
    margin: 1em auto;
    padding: 1em; 
}

/** structure **/
#flex { /* this contains the aside#sbLeft, aside#sbRight, and post-and-asides */
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}

#flex.reverse {
    flex-direction: column-reverse;
}

/** for SIDEBAR **/
/* 3/7/26: i imagine i could make things more efficient if i made a class for my two sidebars, but i'm still messing around right now. */

aside#sbLeft,
aside#sbRight {
    font-size: 85%;
}

aside#sbLeft {
    border-bottom: 1px dashed var(--pink-trans);
}

#flex.reverse aside#sbLeft {
    border-bottom: none;
}

aside#sbLeft h3,
aside#sbRight h3 {
    text-align: center;
    padding-bottom: 2px;
    border-bottom: pink 2px solid;
    border-image: linear-gradient(90deg, var(--pink-trans) 0%, var(--pale) 50%, var(--blue-trans) 100%) 30;
}

aside section {
    margin-bottom: 1.5em;
}

/* toc specific */

details.toc-details {
    border: none;
    margin: 0;
}

summary:hover {
    cursor: pointer;
}

details.toc-details summary {
    list-style: none;
}

.toc-details h3 {
    padding-bottom: 6px;
}

nav.toc ul {
    margin-left: -0.75em;
}

nav.toc li {
    margin-left: -1em;
    list-style-type: "→ ";
    padding: 2px 0;
}

nav.toc a {
    text-decoration: solid var(--bgpink) 2px underline;
    text-underline-offset: 2px;
}

/* sidebar sections */

/** for ARTICLE **/

#post-and-asides {
    border-bottom: 1px dashed var(--pink-trans);
}

article h1 {
    text-align: center;
}

article h2,
article h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 800px) {
    
    #post-and-asides {
        width: var(--article-maxwidth);
        min-width: var(--article-minwidth);
        border-bottom: none;
    }
    
    #flex,
    #flex.reverse {
        flex-direction: row;
        column-gap: 1.5em;
        justify-content: left;
    }

    #flex.space-evenly {
        justify-content: space-evenly;
    }
    
    aside#sbLeft,
    aside#sbRight {
        width: calc(0.40*var(--article-minwidth));
        padding: 1em 0;
        margin: 0;
    }

    aside#sbLeft {
        border-bottom: none;
    }
    
    article {
        min-width: var(--article-minwidth);
        max-width: var(--article-maxwidth);
    }
}

@media only screen and (min-width: 1200px) {

    .dropdown button {
        min-width: 8em;
    }

    #post-and-asides {
        min-width: var(--article-minwidth);
    }

    #post-and-asides.has-sidenotes {
        min-width: calc((0.75*var(--article-minwidth)) + var(--article-minwidth));
    }

    /* this is for the sidenotes */
    .has_sidenotes p:has(+ aside:hover):after, p:has(+ aside:focus):after, aside:hover:before, aside:focus:before 
    { color: var(--blue); font-weight: 700; }

	.has_sidenotes p:has(+ aside) { counter-increment: sidenotes; }

	.has_sidenotes p:has(+ aside):after {
		color: var(--dim);
        font-size: 0.85rem;
        margin-left: 3px;
		content: '· · · (' counter(sidenotes) ')';
		transition-property: color, background-color, font-weight;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
	}
	.has_sidenotes article aside:before {
		content: counter(sidenotes);
		font-size: 0.85rem;
		position: absolute;
		top: 0;
		left: -1em;
	}
	.has_sidenotes article aside {
		position: absolute;
		max-width: calc(0.40*var(--article-minwidth));
		margin: 0;
		transform: translate(calc(var(--article-minwidth) + 11em), -2em);
	}

}