/* Instructions: Use ^{to mark up the notes in-line.
Put the text of the notes in an like so:

0
What on earth?

Place this at the end of your :

*/

body, #body-container {
/*Display stuff*/
display: flex;
justify-content: center;
}

main {
margin: 0;
flex-shrink: 2;
}

#sidenotes, .sidenotes {
max-inline-size: 25ch;
}

.sidenote-exempt {
display: none;
}

aside.note {
margin-inline-start: 1em;
padding-block-end: 1em;

display: flex;
align-items: flex-start;

font-size: 0.85rem;
}

aside.note>div {
max-block-size: 20em;
overflow-y: auto;
scrollbar-width: thin;
padding-inline-end: 5px;
}

aside.note>div::-webkit-scrollbar {
width: 5px;
background-color: transparent;
}

aside.note>div::-webkit-scrollbar-thumb {
background-color: var(--accent);
}

aside.note p, aside.note blockquote, aside.note img {
margin-block-start: 0;
}

aside.note *:last-child {
margin-block-end: 0;
}

aside.note ul, aside.note ol {
margin: 0;
padding-inline-start: 1em
}

aside.note blockquote {
margin-block-start: 0;
margin-block-end: initial;
margin-inline: 1em;
}

.sidenote-link {
text-decoration: none;
}

a.sidenote-ref {
text-decoration: none;
}

sup.note, .note-number {
margin-block: 0;
margin-inline: 0.2em;
padding-block: 0;
padding-inline: 0.2em;

text-align: center;
border-block-end: 1px solid var(--accent);

background: var(--accent-seethrough);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
padding-block-end: 0.1em;
margin-block-start: -0.1em;
}

.note-number {
margin-inline-end: 0.5em;
font-style: normal;
color: var(--accent);
display: inline;
}

@media only screen and (max-width: 800px) {
aside.note {
padding-block: 0.5em;
}
}}