@import "https://www.nerdfonts.com/assets/css/webfont.css";

:root {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	--colour: #fafafa;
	--secondary-colour: #fafafa;

	--primary-background: #202020;
	--secondary-background: #404040;
	--tertiary-background: #5f5f5f;

	--background-inverted: #fafafa;
	--colour-inverted: #000000;

	--link-colour: #ff8100;
	--link-colour-secondary: #FF962E;

	--brand-colour: #ff8100;
	--brand-bg: #b15900;
}

:root {
	color: var(--colour);
	background-color: var(--primary-background);
}

@media (prefers-color-scheme: light) { :root {
	--colour: #000000;
	--secondary-colour: #000000;

	--primary-background: #fff2e6;
	--secondary-background: #dddddd;
	--tertiary-background: #aaaaaa;

	--background-inverted: #101010;
	--colour-inverted: #cacaca;
	
	--link-colour: #303030;
	--link-colour-secondary: var(--link-colour);
	a, .orange {
		text-decoration-color: #ff8100;
		text-decoration-thickness: 2px;
	}
}}

body {
    margin: 0px;
	 padding: 0px;
}

.main-layout {
	margin: 5px;
	display: flex;

	nav, .filler {
		width: 20%
	}
	main {
		width: 60%;
		max-width: 1000px;
	}
	.toc ul {
		padding-left: 25px;
	}
	.toc {
		padding-right: 5px;
	}

}
@media (min-width: 780px) {
	.main-layout nav details summary { display: none; }
}
@media (max-width: 1150px) {
.main-layout {
	.filler { width: 0px; display: none; }
	main { width: 80%; }
}
}
@media (max-width: 780px) {
.main-layout{
	display: block;

	main {
		width: 100%;
	}

	nav {
		background-color: var(--secondary-background);
		width: unset;
		details {
			padding-top: 10px;
			padding-bottom: 10px;
		}
	}
}}


a {
	color: var(--link-colour);
}

h1, h2, h3, h4, h5, h6 {
	scroll-margin-top: 10px;
}

header {
	margin-top: 0px;

	.title {
		background-color: #5f5f5f;
		color: #ffffff;
		height: 35px;
		margin: 7px;
		border: 2px solid #F86F00;
		border-radius: 6px;

		img {
			max-height: 90%;
			/* -webkit-filter: drop-shadow(1px 1px 1px #222); */
			/* filter: drop-shadow(1px 1px 1px #222); */
		}
	}

	.title > div {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.title > div > * {
		margin-left: 5px;
		margin-right: 5px;
	}
	.title .left {
		float: left;
	}
	.title .right {
		float: right;
	}

	.second {
		background-color: var(--secondary-background);
		color: var(--secondary-colour);
		--link-colour: var(--link-colour-secondary);
		--link-colour-visited: var(--link-colour-visited-secondary);
		/* padding: 2px; */
		padding-left: 10px;
		padding-right: 10px;
		border-bottom: 1px solid var(--brand-colour);
		border-top: 1px solid var(--brand-colour);

		ul {
			padding: 0;
			margin: 0;
			overflow: hidden;
			list-style-type: none;
		}
		ul li {
			display: block;
			float: left;
		}

		ul li a {
			padding: 2px;
			text-decoration: none;
		}
		ul li:after {
			content: "|";
			padding-left: 4px;
			padding-right: 4px;
		}
		ul li:last-child:after {
			content:""
		}

		ul li a:hover {
			background-color: var(--brand-bg);
			color: #000000;
		}
	}
	.pathskip {
		position: absolute;
		display: inline-block;
		line-height: 1;
		transform: translateY(1rem);
	}
	.pathskip:not(:focus) {
		transform: translateY(-4rem);
	}
}

footer {
	.footer-main {
		padding: 2px;
		background-color: var(--secondary-background);
		--link-colour: var(--link-colour-secondary);
		--link-colour-visited: var(--link-colour-visited-secondary);
	}

 	margin-top: 40px;
}


table thead {
	background-color: var(--tertiary-background);
	color: var(--secondary-colour)
}
table th {
	border-bottom: 2px solid var(--brand-colour);
}
table tbody tr:nth-child(2n+1) {
	background-color: var(--primary-background)
}
table tbody tr:nth-child(2n) {
	background-color: var(--secondary-background);
	color: var(--secondary-colour);
	--link-colour: var(--link-colour-secondary);
	--link-colour-visited: var(--link-colour-visited-secondary);
}
table tbody tr td {
	vertical-align: top;
}
table {
	width: 100%;
	.full {
		width: 100%;
	}
	border-bottom: 1px solid var(--brand-colour);
}

.error-heading {
	color: #ff2020;
}

.mediaplayer {
	display: grid;
	height: 100%;
	img, video {
		max-width: 100%;
		max-height: 70vh;
		margin: auto;
		object-fit: contain;
	}

	audio {
		width:90vw;
		margin-left: auto;
		margin-right: auto;
	}

	.media-below {
		margin: auto;
		margin-top: 30px;
		margin-bottom: 0px;
	}

	#meta {
		tr, td, th {
			border: 1px solid var(--colour);
		}
		th {
			border-width: 2px;
		}
	}
}


.line {
	width: 100%;
	border-bottom: 2px solid var(--brand-colour);
	margin-top: 5px;
	margin-bottom: 5px;
	content: "";
}

.highlighted {
	margin: auto;
	width: calc( 100% - 20px);
	height: calc( 75vh );
	overflow: scroll;
	padding: 5px;
}
/*.precontent {
}*/


.nobullets {
	list-style: none;
}

main {
	ul {
		padding-left: 25px;
	}
}
@media (prefers-color-scheme: light) {
	.main-layout {
		background-color: var(--primary-background);
	}
}

code {
	border: 1px solid var(--brand-colour);
	border-radius: 5px;
	padding-left: 2px;
	padding-right: 2px;
	@media (prefers-color-scheme: light) {
		color: var(--colour-inverted);
		background-color: var(--background-inverted);
	}
}

.orange {
	color: var(--link-colour);
}