:root {
	--green: #6f9400;
	--almostblack: #222;
	--almostwhite: #fffffa;
}

@font-face {
	font-family: 'monaspace-xenon';
	src: url('/face/MonaspaceXenon-regular.woff2') format('woff2');
	/* font-weight: 200; */
}

@font-face {
	font-family: 'Terminal Land Mono';
	src: url('/face/TerminalLandMono-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Terminal Land Mono';
	src: url('/face/TerminalLandMono-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Terminal Land Mono';
	src: url('/face/TerminalLandMono-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Terminal Land Mono';
	src: url('/face/TerminalLandMono-BoldItalic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Linux Libertine'; /* normal */
	src: url('/face/linux-libertine/LinLibertine_R.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Linux Libertine'; /* italic */
	src: url('/face/linux-libertine/LinLibertine_RI.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Linux Libertine'; /* bold */
	src: url('/face/linux-libertine/LinLibertine_RB.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Linux Libertine'; /* bold */
	src: url('/face/linux-libertine/LinLibertine_RBI.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}


@font-face {
	font-family: 'Linux Biolinum'; /* normal */
	src: url('/face/linux-libertine/LinBiolinum_R.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Linux Biolinum'; /* italic */
	src: url('/face/linux-libertine/LinBiolinum_RI.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Linux Biolinum'; /* bold */
	src: url('/face/linux-libertine/LinBiolinum_RB.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Linux Biolinum'; /* bold */
	src: url('/face/linux-libertine/LinBiolinum_RBI.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}


html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Linux Libertine', serif;
	background: var(--green);
}

html.raw, body.raw {
	margin: 5px;
	padding: unset;
	font-family: unset;
	height: unset;
}

body.raw a {
	color: blue;
}

div.almostall {
	background: var(--almostwhite);
	color: var(--almostblack);
}

div.almostall {
	min-height: 100%;
	position: relative;
}

div.greenbar {
	width: 100%;
	height: 8px;
	position: absolute;
	background: var(--green);
}

/* div.content {
	& p:first-of-type::first-letter {
		color: var(--green);
		initial-letter: 2;
		-webkit-initial-letter: 2;
	}
} */

div.content {
	table {
		/* border: 1px solid black; */
		margin: 0px;

		th {
			padding: 0px 10px;
			/* border-left: 1px solid black; */
			border-bottom: 1px solid black;
			margin: 0px;
		}

		.center {
			text-align: center;
		}
	}
}

div#topbar {
	top: 0px;
}

div#bottombar {
	height: 30px;
	bottom: 0px;
	background: var(--almostwhite);
	border-bottom: 8px solid var(--green);
	text-align: center;
	color: #888;
	font-size: 1.1em;
}

div#header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	& h1 {
		font-size: 36px;
		font-family: 'Linux Biolinum', sans-serif;
		text-align: right;
		margin: 10px 0px;
	}

	nav {
		border-top: 1px solid var(--almostblack);
		padding: 10px 0px;
	}
}

a {
	color: var(--green);
	text-decoration: none;
}

p {
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.5;
	font-size: 1.1em;
}

hr {
	margin-top: 35px;
	margin-bottom: 35px;
	border: 0;
	width: 30%;
	border-top: 1px solid var(--almostblack);
}

ul#headernav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul#headernav li {
		display: inline;
		padding-left: 20px;
}

ul#headernav li a {
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		font-size: 1.1em;
		padding: 5px;
		border-radius: 5px;
}

ul#headernav li a:hover {
	/* background: #ccc; */
	text-decoration: underline;
}

ul#headernav li a.current {
		color: #666;
}

div#footer {
		text-align: center;
		height: 50px;
}

div.page {
		max-width: 1100px;
		margin: 0 auto;
		padding: 35px 55px 0px;
}

div.article {
	padding-bottom: 30px;
    /* font-size: 17px; */
	font-size: 1.1em;
	line-height: 1.6;
	/* max-width: 120ch; */
	margin: 0em auto 4em auto;
	object-fit: contain;

	& p {
		text-align: justify;

		a {
			text-decoration: underline;
		}
	}

	& h1 {
		border-bottom: 1px solid var(--almostblack);
	}

	& h1.title {
		border-bottom: 0px;
		font-size: 32px;
		text-align: center;
		font-family: 'Linux Biolinum', sans-serif;
	}

	& h2 {
		font-size: 21px;
		font-weight: bold;
		font-family: 'Linux Biolinum', sans-serif;
	}

	& h3 {
		font-size: 21px;
		font-weight: bold;
		font-family: 'Linux Biolinum', sans-serif;
	}
}



span.itemtitle {
	font-family: 'Linux Biolinum', sans-serif;
	font-size: 21px;
	font-weight: bold;

}

img.logo {
	height: auto;
	width: auto;
	max-height: 81px;
	max-width: 100%;
}

div.summary h3 a {
	color: var(--green);
	text-decoration: none;
}

h3 {
	font-family: 'Linux Biolinum', sans-serif;
	line-height: 1.2em;
	font-size: 30px;
	text-transform: capitalize;
	text-decoration: none;
	letter-spacing: 2px;
	font-weight: 300;
	margin-bottom: 5px;
}

div.article p.date, div.summary p.date {
	text-align: center;
	font-style: italic;
	font-size: 0.85em;
}

div.summary p.date {
	text-align: left;
}

figure {
	margin: 0px;
}

img.d2 {
	max-height: 800px;
}

div.listimage figure img {
	text-align: center;
	display: block;
	max-width: 100%;
	margin: auto;
}

div.map {
	height: 500px;
}

div#searchpage {
	text-align: center;

	& a {
		color: var(--green);
		font-size: 1.2em;
		font-weight: bold;
	}

	& ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		padding-bottom: 50px;

		& li {
			padding-bottom: 10px;
		}
	}
}

div#footer {
	color: #888;
}

div.paginationflex {
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	& a {
		color: #888;
		text-decoration: none;
	}
}

pre {
	padding: 10px;
	background: #042029;
	tab-size: 2;
	font-size: 15px;
	object-fit: contain;
	color: #93A1A1;
}

div.pagination{
	text-align: center;
}

ul.pagination {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 1.2em;

	& li {
		display: inline;
	}

	& a {
		color: #888;
		text-decoration: none;
	}

	& li.disabled a {
		color: #ccc;
	}

	& li.active a {
		font-weight: bold;
	}
}

div.flex {
	display: flex;
	justify-content: space-between;
}

div#prose {
	width: 60%;
}

div.synopsis {
	color: black;
	padding-top: 5px;
	text-align: justify;
}

div.index {
	display: flex;

	& div.article {
		flex: 1 1 0;
		margin-bottom: 30px;
		padding: 0px 15px;

		& h3 {
			text-align: left;
			padding-bottom: 20px;
		}
	}

	& a {
		text-decoration: none;
		color: var(--green);
	}
}

div.index div.article ul, div.search ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div.index ul li, div.search ul li {
		padding-bottom: 15px;
}



div.shaderfigure {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}

.shaderfigure .code {
	margin: 0 30px;
}

.shaderfigure img {
	margin: 0 30px;
	border: 1px solid var(--almostblack);
}

.arrow-right {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;

	border-left: 30px solid gray;
}

.summarylistitem {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.summarylistitem img {
	margin-left: 15px;
}

div.logo {
	background-image: url("/img/digital-flapjack-logo.svg");
	background-repeat: no-repeat;
	background-size: 100%;

	width: 285px;
	height: 81px;
}

ul.taglist {
	list-style-type: none;
	columns: 4;
	margin-bottom: 100px;
}

ul.taglist li {
	font-size: 1.5em;
	margin: 10px;
}

img.aboutme {
	width: 400px;
	height: 400px;
	border-radius: 200px;
	border: 2px solid var(--green);
	object-fit: cover;
}

div.projectlist {
	display: flex;
	flex-wrap: wrap;
}
div.project {
	text-align: center;
	width: 200px;
	margin: 30px;
	color: #888;
}
div.incompleteproject {
	opacity: 0.6;
}
div.project a {
	color: var(--almostblack);
}
div.project a:hover {
	color: var(--green);
}
div.projecticon {
	margin: auto;
	width: 128px;
	height: 128px;
	background-repeat: no-repeat;
	background: linear-gradient(0deg, #666, #BBB);
	border-radius: 19px;
}
img.projecticon {
	margin: auto;
	width: 128px;
	height: 128px;
	border-radius: 19px;
}

.projecticon {
	transition: all .2s ease-in-out;
}
div.project a:hover .projecticon {
	transform: scale(1.1);
}

div.blogcontents__item {
	margin: 20px 0px 40px 0px;
}
div.blogcontents__item ul.leaders	{
	font-size: 1.3em;
}


.blogcontents__item__inner {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.blogcontents__item__inner p {
	margin-top: 0px;
}
.blogcontents__item__inner img {
	margin-left: 15px;
	box-shadow: 0px 0px 10px #888;
}

ul.leaders {
	padding: 0;
	overflow-x: hidden;
	list-style: none;
	font-family: 'Linux Biolinum', sans-serif;
}
ul.leaders li:before {
		float: left;
		width: 0;
		white-space: nowrap;
		content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
	padding-right: 0.33em;
	background: var(--almostwhite);
}
ul.leaders span + span {
	float: right;
	background: var(--almostwhite);
	padding-left: 0.33em;
}


div.bloglisticon {
	margin: auto;
	width: 128px;
	height: 128px;
	background-repeat: no-repeat;
	background: linear-gradient(0deg, #666, #BBB);
	border-radius: 19px;
}

div.indexicon {
	margin: auto;
	margin-left: 15px;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background: linear-gradient(0deg, #666, #BBB);
	border-radius: 15px;
}

div.paper {
	& span.title {
		font-size: 1.5em;
		font-weight: bold;
		font-family: 'Linux Biolinum'
	}

	& span.authors {
		font-style: italic;
	}
}


// Source code...

span[class$="hmm"] {
	color: #93A1A1;
}

span[class*="-comment"] {
	color: #93A1A1;
}

span[class*="-operator"] {
	color: #708284;
}

span[class*="-keyword"] {
	color: #859900;
}

span[class*="-function"] {
	color: #536871;
}

span[class*="-identifier"] {
	color: #268BD2;
}

span[class$="-source"] {
	color: #819090;
}

video {
	display: block;
	margin: 0 auto;
}

  .compare {
	position: relative;
	display: block;        /* was inline-block */
	margin: 0 auto;        /* add this */
	overflow: hidden;
	user-select: none;
	/* Size to your images */
	width: 900px;
	max-width: 100%;
  }

  .compare img {
	display: block;
	width: 100%;
	height: auto;
  }

  .compare .after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 50% 0 0); /* updated by JS */
  }

  /* The range input sits over everything */
  .compare input[type=range] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;          /* invisible, but captures pointer events */
	cursor: col-resize;
	z-index: 3;
  }

  /* The visible divider line + handle */
  .compare .handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--green);
	left: 50%;           /* updated by JS */
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 2;
  }

  .compare .handle::before,
  .compare .handle::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	background: var(--green);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }

  .compare .handle::before { top: calc(50% - 20px); }
  .compare .handle::after  { display: none; } /* one circle is enough */

  /* Optional labels */
  .compare .label {
	position: absolute;
	top: 1rem;
	padding: 0.25rem 0.5rem;
	background: rgba(0,0,0,0.5);
	color: white;
	font: 0.75rem/1 sans-serif;
	border-radius: 3px;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.1s ease;
  }
  .compare .label-before { left: 1rem; }
  .compare .label-after  { right: 1rem; }

@media screen and (prefers-color-scheme: dark) {
	div.almostall {
		color: var(--almostwhite);
		background: var(--almostblack);
	}
	div#bottombar {
		background: var(--almostblack);
	}
	div.synopsis {
		color: var(--almostwhite);
	}
	div.project a {
		color: var(--almostwhite);
	}
	ul#headernav li a.current {
			color: #aaa;
	}
	ul#headernav li a:hover {
		background: #444;
	}
	div.logo {
		background-image: url("/img/digital-flapjack-logo-dark.svg");
	}

	hr {
		border-top: 1px solid var(--almostwhite);
	}

	ul.leaders span:first-child, ul.leaders span + span	{
		background: var(--almostblack);
	}

	was_pre {
		background: darkgray;
	}

	div.article {
		& h1 {
			border-bottom: 1px solid var(--almostwhite);
		}
	}

	div#header {
		nav {
			border-top: 1px solid var(--almostwhite);
		}
	}
}