/* eb-garamond-regular - latin */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: auto; 
src: url("/fonts/garamond/eb-garamond-v9-latin-regular.ttf");

}

.katex-mathml annotation {
display: none;
}
.katex { font-size: 1.1em!important; }

:root {
	--dim: hsl(240, 4%, 50%);
	--light: hsla(240, 4%, 95%, 0.936); /*f0f0f0*/
	--body-bg: #a9d1ff;
	--text-col: #000000;
    --paper-col: #ffffff;
	--structure-col:#167ff8; 
	--a-col: var(--light); /* 01BAEF */
	--h1-col: #000000;
	--h2-col: #000000;
    --highlight: #3490f9;
    --border-col: var(--dim);
    
    --tiny-space: 0.25rem;
	--small-space: 0.75rem;
	--med-space: 1.5rem;
	--big-space: 2.5rem;
    --main-width: calc(125ch - 200px);
	--blockquote-border: 3px solid var(--h2-col);
}

html {
	background: var(--body-bg);
	color: var(--text-col);
    font-family: 'EB Garamond', garamond;
    line-height: 1.5;
}
body {
    /*max-width: var(--main-width);*/
    margin: auto;
}

.layout {
	display: flex;
	align-items: flex-start;
	gap: var(--med-space);
}
/* HEADINGS */
h1 {
	color: var(--h1-col);
	text-decoration: none;
	text-align: center;
	font-size: 40px;
	font-weight: 500;
}
h2 {
	color: var(--h2-col); 
    text-align: center;
    font-size: 30px;
	font-weight: 500;
}
h3 {
	text-align: center;
	font-size: 25px;
	font-weight: 500;
}
h4 {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
}
ul li li {
	color: var(--dim);
}
main>p {
    color: var(--text-col);
    font-size: 20px;
}
img[alt=divider] {
    display: block;
    margin: auto;
    margin-bottom: 50px;
}
div.homelink>a {
    font-size: 20px;
    display: block;
    padding: 20px;
}
div.homelink_end>a {
    font-size: 20px;
    display: block;
    margin: auto;
    text-align: center;
    padding: 50px;
}


/* ----- sidenotes ----- */
main { 
	max-width: var(--main-width);
	margin: auto;
    margin-top: 50px;
    counter-reset: sidenotes; 
    padding: 100px;
    box-shadow: 5px 5px 25px #7793b3;
    background-color: var(--paper-col);
}
main ul {
    font-size: 20px;
}
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-in-out;
}
aside:hover, aside:focus, aside:hover:before , aside:focus:before {
	z-index: 1;
	color: var(--body-col);
	border-color: var(--structure-col);
}



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

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

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

div.theorem>p {
    color: var(--text-col);
    font-size: 20px;
}


/* -------------------------------------------------------- */
/* NAV AND SIDENOTES FOR LARGE SCREENS */
/* -------------------------------------------------------- */
@media (width > 190ch) {
	p:has(+ aside:hover):after, p:has(+ aside:focus):after, aside:hover:before, aside:focus:before { color: var(--structure-col); }
	p:has(+ aside) { counter-increment: sidenotes; }
	p:has(+ aside):after {
		color: var(--dim);
		content: '[' counter(sidenotes) ']';
		transition: color 0.5s ease-in-out;
	}
	aside:before {
		content: '[' counter(sidenotes) ']';
		font-size: 0.85rem;
		position: absolute;
		top: -10px;
		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) - 150px);
		max-width: calc(0.65*var(--main-width));
		margin: 0;

		transform: translate(calc(var(--main-width) + var(--small-space) + 100px), calc(-1*var(--big-space)));
	}
	aside:nth-of-type(2n+1) {
		transform: translate(calc(var(--main-width) + var(--small-space) + 100px), calc(-1*var(--big-space)));
	}
	aside:nth-of-type(2n) {
		transform: translate(calc(-100% - var(--small-space) - 100px), calc(-1*var(--big-space)));
	}
}