:root {
	--main-background-color: rgb(250,250,250);
	--accent-color: rgb(252, 102, 33);
	--link-color: black;
	--main-font-color: black;

	--article-background-color: rgb(237, 237, 237);
	--label-font-color: white;
	--label-background-color: black;
	--fine-details-font-color: rgb(100,100,100);
}

/*New Color Scheme in progress*/
:root {
	
	/* Backgrounds */
	--main-background-color: rgb(228, 238, 255); /*rgb(243, 244, 246);*/
	--article-background-color: rgb(249, 250, 251);

	/* Text */
	--main-font-color: rgb(17, 24, 39);
	--link-color: rgb(17, 24, 39);
	--fine-details-font-color: rgb(75, 85, 99);
	--label-background-color: rgb(0, 25, 78);
	--label-font-color: rgb(249, 250, 251);

	/* These are the same and should be unified */
	--accent-color: rgb(252, 102, 33);
	--tint-color: rgb(252, 102, 33);
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--main-background-color: rgb(5,7,12);
		--article-background-color: rgb(17, 24, 30);
		--label-background-color: rgb(75, 85, 99);

		--main-font-color: rgb(249, 250, 251);
		--link-color: rgb(249, 250, 251);
		--fine-details-font-color: rgb(229, 231, 235);
		--label-font-color: rgb(243, 244, 246);

		--accent-color: rgb(252, 102, 33);
		--tint-color: rgb(252, 102, 33);
	}
} */

* {
	margin: 0;
	padding: 0;
	font-family: "Fira Sans", sans-serif;
	color: var(--main-font-color);
}

nav, #break-on-mobile {
	color: var(--fine-details-font-color);
}

header, body {
	margin: 0 auto;
	width: 80vw;
	max-width: 1000px;
	background-color: var(--main-background-color);
}

@media (max-width: 500px) {
	header, body { width: 95vw; }
}

a:link, a:visited {
	color: var(--link-color);
	text-decoration: underline;
}

/*Header & Title CSS*/
header {
	margin: 0;
	padding-left: 2px;
	width: 75%;
	margin-top: 5vh;
	margin-bottom: 2vh;
	color: var(--fine-details-font-color);
}

#title {
	font-size: 50px;
	font-weight: 900;
	font-style: italic;
	line-height: 0%;
}

@media screen and (max-width: 600px) {
	#title {
		line-height: 75%;
		font-size: 30px;
	}

	#break-on-mobile:after {
		content: "\A";
		white-space: pre;
	}
}

nav {
	padding-bottom: 5vh;
}

header a:link, header a:visited {
	text-decoration: none;
	/*color: var(--link-color);*/
	color: var(--fine-details-font-color);
}

header a {
	display: inline-block;
}

a:hover, header a:hover {
	color: var(--accent-color);
}

/*header a:hover {
	border-radius: 5px;
	background-color: var(--accent-color);
	color: white;
}*/

header nav a {
	font-size: 12px;
}

header, h1, #page-title {
	transform: rotate(var(--rotate-angle));
}

/*Footer CSS*/
footer {
	padding-top: 4vh;
	padding-bottom: 2vh;
	text-align: center;
}

@media (max-width: 500px) {
	#title {
		font-size: 35px;
	}
	header nav, header nav a {
		font-size: 22px;
	}
	#break-on-mobile:after {
		content: "";
	}
}

.embed-container { /*Youtube Embedding*/
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed { /*Youtube Embedding*/
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.article-header {
	padding-bottom: 25px;
}

#date {
	padding-right: 2.5%;
	color: var(--fine-details-font-color);
}

@-webkit-keyframes highlightNav {
	15% {
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1.2, 1.1)rotate(0deg);
		color: rgb(252, 102, 33);
		text-decoration: none;
	}
	40% {
		-webkit-transform-origin: center center;
		-webkit-transform: scale(0.95, 0.95) rotate(0deg);
		color: rgb(252, 102, 33);
		text-decoration: none;
	}
	75% {
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1.05, 1) rotate(0deg);
		color: rgb(252, 102, 33);
		text-decoration: none;
	}
	100% {
		-webkit-transform-origin: center center;
		-webkit-transform: scale(1, 1) rotate(0deg);
		color: rgb(252, 102, 33);
		text-decoration: none;
	}
}



main {
	margin-right: 20%;
	margin-left: 20px;
	background-color: var(--article-background-color);
	margin-top: 1vh;
	font-size: 14px;
}

p {
	margin: 0.7em 0px;
	line-height: 1.3;
 }

@media (max-width: 768px) {
	main {
		margin-right: 20px;
	}

	p {
		font-size: 16px;
	}
}

#page-title {
	font-weight: 700;
	font-size: 25px;
	font-style: bold;
	color: var(--fine-details-font-color)
}

article {
	padding: 5%;
}

/*Image and side stuff*/
img {
	max-width: 100%;
}

.section-right {
	float:right;
	width: 50%;
	max-width: 338.162px; /*2 times base GR, converted to article size*/
	margin: 0 0 3vh 2%; /*top right bottom left*/
}

figure p, figcaption {
	color: var(--fine-details-font-color);
	margin: 0;
	padding: 0;
	font-size:90%;
	text-align:center;
}

@media (max-width: 768px) {
	.section-right {
		float: none;
		width: 100%;
		margin: 0px;/*2%;*//*0 0 3vh 2%; top right bottom left*/
		max-width: none;
	}
}
/*end of image and side bar stuff*/

#date {
	text-align: right;
	padding-right: 2.5%;
	padding-top: 2.5vh;
	font-size: 14px;
	color: var(--fine-details-font-color);
}

.inline-date {
    color: var(--fine-details-font-color);
}

.inline-title{
    font-size: 18px;
}

li + li {
    margin-top: 3px;
}

h1 {
 	  margin-top: 0.83em;
	  margin-bottom: 0.83em
}

h2 {
	margin-top: 0.83em;
	margin-bottom: 0.83em
}

h3 {
	padding-top: 2.5vh;
	padding-bottom: 0.5vh;
}

ol, ul {
	margin: 1em 0px 1em 0px;
	padding-left: 20px;
}

/*Marginal Notes on Desktop*/
aside, .aside {
	display: inline;
	color: var(--fine-details-font-color);
	float: right;
	position: relative;
	width: 20vw;
	margin-right: -24vw;
	font-size: 16px;
	background-color: rgb(255, 251, 244);
	padding: 5px;
	font-size: 14px;
	border-radius: 5px;
}

/*Marginal Notes on mobile*/
@media (max-width: 768px) {
	aside, .aside {
		display: block;
		float: none;
		margin: 5% 10% 5% 10%;
		width: 80%;
		font-size: 15px;
	}
}

/*the reference numbers in marginal notes use small-caps numbers, to be less intrusive*/
sup {
	font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc";
  -webkit-font-feature-settings: "c2sc";
  font-feature-settings: "c2sc";
}


article div.definition {
    border-color: black;
    font-size: 95%;
    padding-inline-start: 1em;
    padding-block-start: 1em;
    padding-block-end: 1em;
    border-left: 3px solid;
}


code {
    font-family: monospace;
}