:root {
	--light: #ff538a;
	--wiki: #0b1c51;
	--dark: #152868;
	--highlight: #e3e305;
	--plain: #fbf1ca;
}

html {
	color: var(--light);
	background-color: var(--dark);
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}
.logo {
	background-color: var(--light);
	-webkit-mask: url('/assets/logo.svg') no-repeat left;
	mask: url('/assets/logo.svg') no-repeat left;
	height: 4em;
	margin: 0.4em 0 1.5em 0.3em;
	display: block;
}
.video-player {
	margin: 2em;
	width: calc(100% - 4em);
	border: 1px solid var(--light);
	--plyr-color-main: var(--light);
}
p > img {
	margin-left: 2em;
	margin-right: 2em;
	width: calc(100% - 4em);
	border: 1px solid var(--light);
}
.nb-img {
	border: none;
	margin: 0;
	width: 100%;
}
.q-desc {
	margin: -1em 0 0 0;
	text-align: center;
	font-style: italic;
	font-size: 0.9em;
	color: var(--highlight);
}
.img-desc {
	margin: -1.3em 0 0 0;
	text-align: center;
	font-style: italic;
	font-size: 0.9em;
	color: var(--highlight);
}
.img-container {
	position: relative;
}
.img-container > img {
	display: block;
}
.img-tag {
	font-size: 1em;
	position: absolute;
	bottom: 1em;
	right: 1em;
	color: var(--dark);
}
.img-container:hover img {
	border: 1px solid var(--highlight);
}
.img-container:hover .img-tag {
	color: var(--highlight);
}
.image-desc {
	margin: 0.5em 0.5em 0.2em 0.5em;
	width: calc(100% - 0.5em);
	border: 1px solid var(--light);
}
li > a > .fa {
	font-size: 0.7em !important;
}
.selected {
	color: var(--dark);
	background-color: var(--light);
}
h1 {
	font-weight: 300;
	text-transform: lowercase;
}
h2, h3, h4, h5, h6 {
	font-weight: 300;
	margin-top: 0;
}
hr {
	color: #9694ce;
	margin: 2rem 0;
}
p {
	margin: 1rem 0;
}
a {
	color: var(--highlight);
}
a:hover {
	color: var(--plain);
}
li {
	margin: 0.4rem 0;
}
*:target {
	background-color: var(--light);
	color: var(--dark);
	padding-left: 0.2em;
}
.wrapper {
	background-color: var(--plain);
	color: var(--wiki);
	padding: 3ch;
	border-radius: 1em;
	max-width: 110ch;
	margin: 4rem auto;
}
.wrapper a {
	color: var(--light);
}
.wrapper a:hover {
	color: mediumvioletred;
}
.wrapper blockquote {
	font-style: italic;
	border: thin solid var(--light);
	padding: 1rem;
}
.wrapper blockquote p {
	margin: 0;
	color: var(--wiki);
}
.wrapper .q-desc {
	color: var(--wiki);
}
.wrapper .img-desc {
	color: var(--light);
}
.wiki {
	background-color: var(--plain);
	color: var(--wiki);
	padding: 3ch;
	border-radius: 1em;
	max-width: 120ch;
	margin: 4rem auto;
	border-radius: 1em;
	margin: 4rem auto;
}
.wiki a {
	color: var(--light);
}
.wiki a:hover {
	color: mediumvioletred;
}
.wiki blockquote {
	font-style: italic;
	border: thin solid var(--light);
	padding: 1rem;
}
.wiki blockquote p {
	margin: 0;
	color: var(--wiki);
}
.wiki .q-desc {
	color: var(--wiki);
}
.wiki .img-desc {
	color: var(--light);
}
.wiki .columnA {
	float: left;
	width: 64%;
}
.wiki .columnB {
	float: right;
	width: 35%;
}
hr {
	text-align: center;
	border: 0;
}
hr:before {
	content: '<';
}
hr:after {
	content: attr(data-content) '/>';
}
table, th, td {
	width: 100%;
	border: thin solid var(--plain);
	border-collapse: collapse;
	padding: 0.4rem;
}
code {
	color: var(--dark);
	background-color: var(--plain);
}
div.highlighter-rouge code {
	display: block;
	overflow-x: auto;
	padding: 1rem;
}
blockquote {
	font-style: italic;
	border: thin solid var(--highlight);
	padding: 1rem;
}
blockquote p {
	margin: 0;
}
/* Create two equal columns that floats next to each other */
.columnA {
	float: right;
	width: 58%;
}
.columnB {
	float: left;
	width: 40%;
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
	.columnA {
		width: 100%;
   }
	.columnB {
		padding-top: 2em;
		width: 100%;
   }
	.wiki .columnA {
		width: 100%;
   }
	.wiki .columnB {
		padding-top: 0em;
		padding-bottom: 1em;
		width: 100%;
   }
}
#photos {
   /* Prevent vertical gaps */
	line-height: 0px;
	-webkit-column-count: 2;
	-webkit-column-gap: 0px;
	-moz-column-count: 2;
	-moz-column-gap: 0px;
	column-count: 2;
	column-gap: 0px;
	padding: 0px;
	padding-bottom: 0;
}
#photos img, #photos-simple img {
   /* Just in case there are inline attributes */
	width: calc(100% - 15px) !important;
	height: auto !important;
	border: 1px solid var(--dark);
	margin: 5px;
}
#photos-left {
	float: left;
	width: 50%;
	padding-right: 0px;
}
#photos-right {
	float: right;
	width: 50%;
	padding-left: 0px;
}
.close {
	display: flex;
	margin: 0 -1.8em 0 -1.8em;
	width: calc(100% + 3.6em);
}
.close-after {
	padding-top: 1em;
	margin: 0 -2em 0 -2em;
	background-color: var(--dark);
}
.close-after + * {
	margin: 0 -2em 0 -2em;
	background-color: var(--dark);
}
.close-border-mid {
	width: 100%;
}
.close-border-pre {
	content: "";
	height: 2em;
	width: 2em;
	background: var(--dark);
}
.close-border-pre:before {
	display: block;
	content: "";
	height: 2em;
	width: 2em;
	background: var(--plain);
	border-bottom-left-radius: 50%;
}
.close-border-pos {
	content: "";
	height: 2em;
	width: 2em;
	background: var(--dark);
}
.close-border-pos:before {
	display: block;
	content: "";
	height: 2em;
	width: 2em;
	background: var(--plain);
	border-bottom-right-radius: 50%;
}
.open {
	display: flex;
	margin: 0 -1.8em 0 -1.8em;
	width: calc(100% + 3.6em);
	background-color: var(--dark);
}
.open-prev {
	padding-top: 1em;
	margin: 0 -2em 0 -2em;
	background-color: var(--dark);
}
.open-border-mid {
	width: 100%;
	background: var(--plain);
}
.open-border-pre {
	content: "";
	height: 2em;
	width: 2em;
	background: var(--dark);
}
.open-border-pre:before {
	display: block;
	content: "";
	height: 2em;
	width: 2em;
	background: var(--plain);
	border-top-left-radius: 50%;
}
.open-border-pos {
	content: "";
	height: 2em;
	width: 2em;
	background: var(--dark);
}
.open-border-pos:before {
	display: block;
	content: "";
	height: 2em;
	width: 2em;
	background: var(--plain);
	border-top-right-radius: 50%;
}
.mobile-img {
	display: none;
}
.desktop-img {
	display: block;
}
@media (max-width: 1200px) {
	#photos {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
   }
}
@media (max-width: 1000px) {
	#photos {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
   }
}
@media (max-width: 900px) {
	.mobile-img {
		display: block;
   }
	.desktop-img {
		display: none;
   }
}
@media (max-width: 800px) {
	#photos {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
   }
	#photos-left, #photos-right {
		width: 100%;
   }
}
@media (max-width: 400px) {
	#photos {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
   }
	#photos-left, #photos-right {
		width: 100%;
   }
}
/* forms */
input[type=text] {
	padding-left: 0.5em;
	background-color: var(--dark);
	border: 1px solid var(--highlight);
	color: var(--highlight);
}
textarea {
	font-size: 0.9em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
	background-color: var(--dark);
	border: 1px solid var(--highlight);
	color: var(--highlight);
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	resize: none;
}
button {
	margin-top: 0.5em;
	font-size: 0.9em;
	color: var(--highlight);
	background-color: var(--dark);
	border: 1px solid var(--dark);
}
button:before {
	content: '> ';
}
button:after {
	content: attr(data-content) ' <';
}
button:hover {
	background-color: var(--highlight);
	border: 1px solid var(--highlight);
	color: var(--dark);
}
#wiki {
	margin: 0.5em 0.5em 0.2em 0.5em;
	width: calc(100% - 0.5em);
	background-color: var(--dark);
	border-top-left-radius: 0.8em;
	border-top-right-radius: 0.8em;
	padding-bottom: 0.5em;
	margin-top: 1em;
	color: var(--light);
}
#wiki a {
	color: var(--highlight);
}
#wiki a:hover {
	color: goldenrod;
}
.wiki-header {
	font-weight: bolder;
	text-transform: uppercase;
	background-color: black;
	color: var(--plain);
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
	margin-top: 1em;
}
.wiki-header:first-child {
	margin-top: 0;
	border-top-left-radius: 0.8em;
	border-top-right-radius: 0.8em;
}
.wiki-img {
	margin: 1em;
	width: calc(100% - 2em);
	border: 1px solid black;
}
.flex {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.wiki-key {
	color: var(--plain);
	text-transform: uppercase;
	font-weight: bolder;
	margin-left: 1em;
	margin-right: auto;
}
.wiki-val {
	color: var(--highlight);
	text-transform: uppercase;
	margin-right: 1em;
	margin-left: auto;
}
.upper {
	text-transform: uppercase;
}
.tmp {
	background-color: var(--wiki);
}