:root {
	--dark: #1b1b1f;
	--dim: hsl(240, 4%, 50%);
	--light: hsla(240, 4%, 95%, 0.936); /*f0f0f0*/
	--body-bg: var(--dark);
	--body-col: var(--light);
	--structure-col:var(--light); 
	--a-col: var(--light); /* 01BAEF */
	--h1-col: var(--light);
	--h2-col: var(--light);
    --highlight: #FFC8FB;
    --tiny-space: 0.25rem;
	--small-space: 0.75rem;
	--med-space: 1.5rem;
	--big-space: 2.5rem;
    --main-width: 80ch;
	--blockquote-border: 3px solid var(--h2-col);
}

.katex-mathml annotation {
	display: none;
}

html {
	background: var(--body-bg);
	color: var(--body-col);
    font-family: 'Source Serif 4', sans-serif;
    line-height: 1.7;
}
body{
    /*max-width: var(--main-width);*/
    margin: auto;
	font-size: 18px;
}
/* HEADINGS */
h1 {
	color: var(--h1-col);
	text-decoration: none;
	text-align: center;
}
h2, h3, h4, h5 { color: var(--h2-col); 
}

h2 {
	text-align: right;
	font-size: xx-large;
	margin: 3px 0px; 
	margin-top: 20px;
    border-bottom: 1px solid var(--dim);
}

/* links */
a, .alike {
	color: var(--a-col);
	text-decoration-thickness: calc(var(--tiny-space)/4);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	/* transition-property: text-decoration-thickness, text-decoration-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out; */
}
/*
a:hover, a:focus, a:active, .alike:hover, .alike:focus, .alike:active { 
	text-decoration-thickness: var(--tiny-space); 
} */
a:hover {
	color: var(--h1-col);
}
aside a {
	color: var(--a-col);
	text-decoration-thickness: calc(var(--tiny-space)/4);
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
aside a:hover {
	color: var(--h1-col);
}
/* ----- sidenotes ----- */
main { 
	max-width: var(--main-width);
    counter-reset: sidenotes; 
	margin: auto;
}

aside {
	line-height: 1.5;
	margin-left: 15%;
	color: var(--dim);
}
aside, aside:before {
	transition-property: color, border-color;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
aside:hover, aside:focus, aside:hover:before , aside:focus:before {
	z-index: 1;
	color: var(--body-col);
	border-color: var(--structure-col);
}

/* OTHER */
::selection { background-color: var(--highlight); }

blockquote { 
	border-left: var(--blockquote-border);
	margin: 1.5em 10px;
	padding-left: 20px;
}
a[href^="http"]::after { content: "⁺"; }

/* -------------------------------------------------------- */
/* KaTeX NOTES FORMATTING */
/* -------------------------------------------------------- */
img[alt=notes] { /* images in notes will be full width */
	width: 60%;
	display: block;
	margin: auto;
	border: var(--tiny-space) double var(--dim);
	border-color: var(--dim);
	padding: 10px;
  }

div.theorem {
	padding: 10px;
	border: var(--tiny-space) double var(--dim);
	border-color: var(--dim);
	font-weight: bold;
	margin: 10px;
	transition: border-color 0.25s ease;
}

div.theorem:hover {
	border-color: var(--h1-col);
}


/* -------------------------------------------------------- */
/* SIDEBAR NAVIGATION */
/* -------------------------------------------------------- */
nav {
	/* border: var(--tiny-space) double var(--dim); */
	position: fixed;
	transform: translate(0px);
	width: 400px;
	max-height: calc(100% - 90px);
	overflow-x: wrap;
	overflow-y: scroll;
	/* transition-property: border-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out; */
	display: none; /* hide unless large screen */
	font-size: 14px;
}

/* nav:hover{
	border-color: var(--structure-col);
} */

nav a {
	color: var(--dim);
	text-decoration: none;
	transition-property: color;
	transition-duration: 0.25s;
	transition-timing-function: ease;
}

nav a:hover{
	color: var(--light);
}

p.navheader {
	color: var(--dim);
	text-align: center;
	font-weight: bold;
}

nav ul {
	list-style-type: none; /* Remove bullets */
}


/* ----- for larger screens ----- */
@media (width > 190ch) {
	p:has(+ aside:hover):after, p:has(+ aside:focus):after, aside:hover:before, aside:focus:before { color: var(--structure-col); }
	:is(p, div.theorem):has(+ aside) { /* notes on p and theorem inc */
		counter-increment: sidenotes;
	}
	:is(p, div.theorem):has(+ aside):after {
		color: var(--dim);
		content: '[' counter(sidenotes) ']';
		transition: color 0.5s ease-in-out;
		font-weight: normal;
	}
	aside:before {
		content: counter(sidenotes);
		font-size: 0.85rem;
		position: absolute;
		top: var(--tiny-space);
		left: var(--tiny-space);
	}
	aside {
		background-color: var(--body-bg);
		/* border: var(--tiny-space) double var(--dim); */
		padding: var(--small-space);
		position: absolute;
		box-sizing: border-box;
		width: calc(0.5*(100% - var(--main-width)) - var(--med-space));
		max-width: calc(0.65*var(--main-width));
		margin: 0;
		transform: translate(calc(var(--main-width) + var(--small-space)), calc(-1*var(--big-space)));
	}
	/* aside:nth-of-type(2n+1) {
		transform: translate(calc(var(--main-width) + var(--small-space)), calc(-1*var(--big-space)));
	}
	aside:nth-of-type(2n) {
		transform: translate(calc(-100% - var(--small-space)), calc(-1*var(--big-space)));
	} */
	nav {
		display: block;
	}
}