@font-face {
	font-family: 'Editundo';
	src: url('Assets/Font/EditUndoBRK.eot');
	src: url('Assets/Font/editundo.eot?#iefix') format('embedded-opentype'), url('Assets/Font/editundo.woff') format('woff'), url('Assets/Font/editundo.ttf') format('truetype'), url('Assets/Font/editundo.svg#EditUndoBRK') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	/* General colors being used on site,
	brace yourselves for some really fancy variable names. */
	--primaryColor: #ff6800;
	--primaryDark: #121212;
	--secondaryDark: #161616;
	--tertiaryDark: #1a1a1a;
	--primaryGrey: #262626;
	--secondaryGrey: #313131;
	--tertiaryGrey: #414141;

	--teritaryGrey: #414141;
	--primaryLight: #eeeeee;
	--secondaryLight: #aaaaaa;
	--tertiaryLight: #777777;
	--quaternaryLight: #555555;
	--primaryHighlight: #ffffff11;
	--secondaryHighlight: #000000aa;
	--tertiaryHighlight: #ffffff22;
	/* Color shades being used on buttons. */
	--primaryGreen: #006600;
	--secondaryGreen: #118811;
	--tertiaryGreen: #22aa22;
	--primaryYellow: #bbbb00;
	--secondaryYellow: #dddd11;
	--tertiaryYellow: #ffff22;
	--primaryBlue: #0066aa;
	--secondaryBlue: #1188cc;
	--tertiaryBlue: #22aaee;
	--primaryOrange: #bb2400;
	--secondaryOrange: #dd4600;
	--tertiaryOrange: #ff6800;
	--primaryRed: #aa0000;
	--secondaryRed: #cc1111;
	--tertiaryRed: #ee2222;
	--primaryViolet: #3e45a6;
	--secondaryViolet: #5067b8;
	--tertiaryViolet: #7289da;
	--borderWidth: 3px;
	--sidebarWidth: calc(10em + 10vw);
	--backgroundImageHeight: 15vw;

	/* A value that affects margin/padding on all elements. */
	--spaceModifier: calc(3vw + 1em);
	scroll-behavior: smooth;
}

/* Layout styling. */

/* General element defaults. */
body {
	margin: 0px;
	padding: 0px;

	color: var(--primaryLight);
	position: relative;

	font-family: Arial, Helvetica, sans-serif;
}

/* Background body, leaves space for sidebar iframe. */
body.frame {
	max-width: 100%;
	padding: var(--spaceModifier);
	padding-right: calc(var(--spaceModifier) + var(--sidebarWidth));

	background-color: var(--primaryDark);
}

/* Background div, leaves space for top background image. */
div.frame {
	width: calc(100% - (var(--spaceModifier) + var(--borderWidth)) * 2);

	margin-top: calc(var(--backgroundImageHeight) - (var(--spaceModifier) * 2));

	padding: var(--spaceModifier);
	background-color: var(--secondaryDark);

	border: var(--borderWidth) var(--primaryColor);
	border-radius: var(--borderWidth);

	border-left-style: solid;
	border-right-style: solid;

	/* New fancy 'clearfix hack' */
	content: "";
	clear: both;
	display: table;

	position: relative;
}

div.innerFrame {
	margin-bottom: calc(var(--spaceModifier) / 2);
	padding: calc(var(--spaceModifier) / 2);

	background-color: var(--tertiaryDark);
	border-bottom: solid var(--borderWidth) var(--tertiaryOrange);

	border-bottom-left-radius: var(--borderWidth);
	border-bottom-right-radius: var(--borderWidth);

	position: relative;
}

/* Brighter box used to separate parts clearly. */
div.outline {
	margin: calc(var(--spaceModifier) / -2);
	margin-top: calc(var(--spaceModifier) / 4);
	margin-bottom: calc(var(--spaceModifier) / 4);

	padding: calc(var(--spaceModifier) / 4);
	background-color: var(--tertiaryDark);
}

/* Additional buttons used for page navigations. */
a.button {
	padding: 1em;

	background-color: var(--tertiaryDark);
	border-radius: var(--borderWidth);

	font-size: 1.6rem;
	text-align: center;

	display: block;

	position: relative;
	z-index: 0;
}

a.button:not([href]) {
	background-color: var(--tertiaryOrange);
}

div.extender {
	width: 100%;
	height: var(--borderWidth);

	left: 0px;
	bottom: 0px;

	background-color: var(--tertiaryOrange);
	border-bottom-left-radius: var(--borderWidth);
	border-bottom-right-radius: var(--borderWidth);

	position: absolute;
	z-index: -1;

	transition: 0.1s;
	transition-timing-function: ease;
}

a.button[href]:hover {
	text-decoration: underline;
	cursor: pointer;
}

a.button:hover div.extender {
	height: 100%;
	border-top-left-radius: var(--borderWidth);
	border-top-right-radius: var(--borderWidth);
}

/* Diffrent types of images. */
.contributor img {
	width: calc(var(--spaceModifier) * 2);
	height: calc(var(--spaceModifier) * 2);

	border-radius: 100%;
	object-fit: fill;
}

/* Wide background image at top of layot.*/
img.backgroundImage {
	width: calc(100vw - var(--sidebarWidth));
	height: calc(var(--backgroundImageHeight) - 5px);

	margin: calc(0px - var(--spaceModifier) - 2.5px);
	z-index: -1;

	filter: blur(5px);

	opacity: 0%;

	position: absolute;
	object-fit: cover;
}

/* Gradient at bottom of top background image, purely decorative. */
div.backgroundGradient {
	left: 0px;
	width: calc(100% - var(--sidebarWidth));

	top: calc(var(--backgroundImageHeight) - (var(--spaceModifier) * 2));
	height: calc(var(--spaceModifier) * 4);

	background-image: linear-gradient(#00000000, var(--primaryDark) 50%);

	z-index: -1;
	position: absolute;
}

div.commentBackground {
	max-height: 10em;

	margin-bottom: calc(var(--spaceModifier) / 2);

	padding: calc(var(--spaceModifier) / 4);
	padding-bottom: calc(var(--spaceModifier) / 2 + var(--borderWidth) + 0.8em);

	background-color: var(--primaryDark);

	overflow: hidden;
	position: relative;

	transition-duration: 1s;
	transition-property: max-height;
}

div.commentBackground div.commentGradient {
	width: calc(100% - (var(--spaceModifier) / 4));
	height: 3em;

	left: 0px;
	bottom: 0px;

	background-image: linear-gradient(#ffffff00, var(--primaryDark) 1.5em);
	position: absolute;
}

div.commentBackground div.commentActions {
	width: 100%;
	height: min-content;

	left: 0px;
	bottom: 0px;

	padding: calc(var(--spaceModifier) / 8);
	text-align: right;

	position: absolute;
}

img.userAvatar {
	object-fit: cover;
}

div.commentBackground button {
	font-size: 0.8rem;
}

div.commentBackground button.showMore {
	left: 0px;
	bottom: 0px;
	position: absolute;
}

/* Things that aren't meant to be selected. */
img, iframe, button, a.button, ul.contents {
	user-select: none;
}

img.icon {
	width: 1em;

	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

/* Iframe styling. */

iframe.sidebar {
	right: 0px;
	width: var(--sidebarWidth);

	top: 0px;
	height: 100vh;

	background-color: var(--tertiaryDark);
	position: fixed;
}

iframe.popup {
	width: 100vw;
	height: 100vh;

	left: 0px;
	right: 0px;

	top: 0px;
	bottom: 0px;

	z-index: 5;
	position: fixed;
}

iframe.modBox {
	width: 15em;
	height: 30em;

	margin: calc(var(--spaceModifier) / 10);
}

iframe.userHeader {
	width: 100%;
	height: 2em;
}

iframe.console {
	width: 100%;
	height: 30em;
}

div.page {
	width: 100%;
}

iframe.widget {
	max-width: 100%;
}

/* Table styling. */

table.layout {
	width: 100%;
	vertical-align: text-top;

	border-collapse: collapse;
	table-layout: fixed;
}

table.layout img {
	width: 100%;
}

table.layout td, .contributor td {
	padding: calc(var(--spaceModifier) / 8);
	vertical-align: top;
}

/* Tag and mod listing style. */

div.tagBox, div.modListing {
	margin-top: calc(var(--spaceModifier) / 4);
	padding: calc(var(--spaceModifier) / 4);

	background-color: var(--tertiaryDark);
	position: relative;
}

div.tagBox div.rightHolder {
	left: 0px;
	right: 0px;

	top: 0px;
	bottom: 0px;

	margin: calc(var(--spaceModifier) / 4);

	text-align: right;
	position: absolute;
}

div.tagBox h3.tagTitle {
	margin-top: 0px;
}

div.tagBox div.rightHolder iframe.userHeader {
	width: calc(10% + 5em);
}

div.tagBox div.menu {
	top: calc(var(--spaceModifier) / 4 + 2.4em);
	left: calc(100% - 1em - var(--spaceModifier) / 2);
}

div.tagBox div.tagHolder {
	margin-bottom: calc(var(--spaceModifier) / 8);
	font-size: 1.8rem;
}

div.modListing img.modImage {
	width: 100%;
	max-height: 25rem;

	object-fit: contain;
	object-position: left;
}

div.modListing a.modLink {
	margin: calc(var(--spaceModifier) / -4);
	margin-bottom: 0px;

	padding: calc(var(--spaceModifier) / 4);
	display: block;
}

div.modListing a.modLink:hover {
	background-color: var(--primaryGrey);
	text-decoration: underline;
}

/* Sidebar styling. */

/* Logo on top of sidebar. */
img.logo {
	width: calc(100% - (var(--spaceModifier) / 2));
	margin: calc(var(--spaceModifier) / 4);

	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* Text styling. */

/* Changes titles. */
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	margin-bottom: 0.5em;
}
h1, h2, h3, h5, h6 {
	font-weight: normal;
}

h6 {
	font-style: italic;
}

hr {
	background-color: var(--primaryColor);
	border: solid calc(var(--borderWidth) / 2) var(--primaryColor);
	border-radius: calc(var(--borderWidth) / 2);
}

/* Fixes nicer looking links, underline is not always added with a:hover. */
a {
	color: var(--primaryLight);

	outline: none;
	text-decoration: none;
}

a.link {
	color: var(--secondaryBlue);
	cursor: pointer;
}

a.link:hover {
	color: var(--tertiaryBlue);
	text-decoration: underline;
}

/* Changes color of text and links when needed. */
.errorText {
	color: var(--tertiaryRed);
}

.signInText {
	color: var(--quaternaryLight);
}

.greyText {
	color: var(--quaternaryLight);
}

.greyText a {
	color: var(--secondaryLight);
}

.greyText a:hover {
	color: var(--primaryLight);
	text-decoration: underline;
}

.greyText a.hiddenLink {
	color: var(--quaterniaryLight);
}

.greyText a:hover.hiddenLink {
	color: var(--tertiaryLight);
}

/* Contributor list styling. */
.contributor h2 {
	font-size: 2em;
}

/* Table of contents styling. */

ul.contents, ul.contents ul {
	list-style-type: none;
	/*counter-reset: item;*/
	overflow-y: hidden;
}

ul.contents item, ul.contents ul item {
	display: block
}

.page a {
	color: var(--secondaryBlue);
}
	.page a:hover {
		color: var(--tertiaryBlue);
		text-decoration: underline;
	}

.page li {
	margin-top: 1em;
	list-style-type: disc;
}

.page note {
	background-color: var(--primaryBlue);
	display: block;
	padding: 0.7em;
	padding-top: 0.7em;
	padding-top: 3em;
	border-radius: 4px;
	margin-top: 1em;
	position: relative;
}
	.page note > div {
		position: absolute;
		left: 0.7em;
		right: 0.7em;
		top: 0.9em;
		height: 1.5em;
		font-size: 1.1em;
		font-weight: bold;
	}
.page warning {
	background-color: var(--primaryRed);
	display: block;
	padding: 0.7em;
	padding-top: 0.7em;
	padding-top: 3em;
	border-radius: 4px;
	margin-top: 1em;
	position: relative;
}
	.page warning > div {
		position: absolute;
		left: 0.7em;
		right: 0.7em;
		top: 0.9em;
		height: 1.5em;
		font-size: 1.1em;
		font-weight: bold;
	}

.page pre {
	position: relative;
	height: 230px;
	background-color: var(--secondaryDark);
}
	.page pre > .header {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 30px;
	}
		.page .header > .headerItem {
			width: 60px;
			position: relative;
			display: inline-block;
			text-align: center;
			height: 30px;
			user-select: none;
			cursor: pointer;
		}
			.page .headerItem.selectedItem {
				background-color: var(--primaryBlue);
			}
			.page .header > .headerItem:hover {
				text-decoration: underline;
			}
			.page .headerItem > span {
				position: absolute;
				top: 50%;
				transform: translate(-50%,-50%);
				left: 50%;
				text-decoration: inherit;
			}

	.page pre > code {
		font-family: Consolas;
		tab-size: 4;
		-moz-tab-size: 4;
		border-top-style: solid;
		border-color: var(--tertiaryDark);
		border-width: 3px;
		margin-top: 0px;
		margin-bottom: 0px;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 30px;
		bottom: 0px;
		background-color: var(--secondaryDark);
	}

	code * {
		font-family: Consolas, Monaco, monospace !important;
	}

ul.contents {
	padding: 1em;
	background-color: var(--tertiaryDark);
}

ul.contents item {
	padding: 0.3em;
	position: relative;
}
item button {
	position: absolute;
	left: -15px;
	top: 0px;
}

ul.contents item:hover {
	background-color: var(--primaryHighlight);
	text-decoration: underline;
	cursor: pointer;
}

/* Form and input styling. */
textArea, input[type=text], input[type=password], input[type=email], input[type=url], input[type=search] {
	padding: 0.5em;

	color: var(--primaryLight);
	background-color: var(--primaryGrey);

	font-size: 0.9rem;

	border: none;
	resize: none;
}

select {
	margin-bottom: calc(var(--spaceModifier) / 4);
	padding: 0.2em;

	color: var(--primaryLight);
	background-color: var(--secondaryGrey);
}

div.popupFrame textArea, input {
	margin-bottom: calc(var(--spaceModifier) / 4);
}

input[type=color] {
	background-color: var(--primaryGrey);
	border: none;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--primaryGrey) inset;
}

input:-webkit-autofill:first-line {
	color: var(--primaryLight);
}

/* Button styling. */

/* A div that contains several buttons. */
div.buttonHolder {
	bottom: 0px;
	right: calc(var(--spaceModifier) / 2);

	user-select: none;
	position: absolute;
}

/* Workaround to stop button backgrounds from twitching
when pressed on firefox or edge. */
div.buttonHolder button:active {
	margin-bottom: calc(0px - var(--borderWidth));
}

/* Makes a general button template with slight 3D effect. */
button, input[type=submit] {
	margin: 0px;
	padding: 0.3em;

	border: none;
	outline: none;

	color: var(--primaryLight);
	background-color: var(--secondaryGrey);

	border-bottom: solid var(--borderWidth) var(--primaryGrey);
	border-radius: 0px;

	vertical-align: top;
	cursor: pointer;

	font-size: 0.9rem;
	transition-duration: 0.05s;

	white-space: nowrap;
	overflow: hidden;

	font-family: Editundo, Arial, Helvetica, sans-serif;
}

button img.icon, input[type=submit] img.icon {
	margin-top: -0.3em;
	margin-bottom: -0.3em;

	vertical-align: middle;
	font-size: 1.5rem;
}

button img, a.button img, input[type=submit] img, div.menu img, h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
	height: 1.2em;
	width: 1.2em;
	margin: -0.1em;
	margin-right: 0.5em;

	vertical-align: top;
	object-fit: contain;

	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

button span {
	margin-left: 0.5em;
	padding: 0.2em;

	border-radius: 0.2em;
	font-weight: bold;

	background-color: var(--tertiaryHighlight);
}

button:hover, input[type=submit]:hover {
	background-color: var(--tertiaryGrey);
	border-color: var(--secondaryGrey);

	text-decoration: underline;
}

button:active, input[type=submit]:active {
	margin-top: var(--borderWidth);
	border-bottom-width: 0px;

	transition-duration: 0.05s;
}

/* EXit button on popups and banners that the user can click on to close. */
button#xit {
	width: 1.5em;
	height: 1.5em;

	right: calc(var(--spaceModifier) / 4);;
	top: calc(var(--spaceModifier) / 4);

	padding: 0px;
	font-weight: bold;

	justify-content: center;
	align-items: center;

	cursor: pointer;
	position: absolute;
}

div.bannerFrame button#xit {
	font-size: 1.2rem;
}

/* Dropdown styling. */

div.menu {
	user-select: none;
	z-index: 2;

	position: absolute;
}

div.menuItems {
	width: max-content;

	background-color: var(--secondaryGrey);
	box-shadow: 0px calc(var(--borderWidth) * 4) calc(var(--borderWidth) * 4) var(--secondaryDark);

	border-radius: var(--borderWidth);
	display: none;
}

div.menuItems p {
	/* For some reason, calc(max-content) seems to give the right results
	while only max-content doesn't. */
	width: calc(max-content);
	margin: 0px;

	padding: calc(0.4em);
	padding-left: calc(0.4em + var(--borderWidth));

	border-left: solid var(--borderWidth) var(--primaryColor);
	text-align: left;
}

div.menuItems p.first {
	border-top-left-radius: var(--borderWidth);
	border-top-right-radius: var(--borderWidth);
}

div.menuItems p.last {
	border-bottom-left-radius: var(--borderWidth);
	border-bottom-right-radius: var(--borderWidth);
}

div.menuItems p:hover {
	background-color: var(--primaryHighlight);

	text-decoration: underline;
	cursor: pointer;
}

.menuButton {
	bottom: 0px;
	vertical-align: middle;

	padding: 0.3em;
	background-color: var(--primaryGrey);

	border-left: solid var(--borderWidth) var(--primaryColor);
	border-radius: var(--borderWidth);

	font-size: 1rem;
}

div.menu:hover div.menuItems {
	display: block;
}

div.menu:hover .menuButton {
	display: none;
}

/* Popup styling. */

div.popupBackground {
	width: 100vw;
	height: 100vh;

	left: 0px;
	right: 0px;

	top: 0px;
	bottom: 0px;

	background-color: var(--secondaryHighlight);

	justify-content: center;
	align-items: center;

	z-index: 5;
	overflow: hidden;

	display: flex;
	position: fixed;
}

div.popupFrame {
	width: max-content;
	max-width: calc(var(--spaceModifier) * 6);
	height: max-content;

	max-height: calc(100% - var(--spaceModifier));
	overflow-y: auto;

	margin: calc(var(--spaceModifier) / 2);
	padding: calc(var(--spaceModifier) / 2);

	background-color: var(--tertiaryDark);
	border-bottom: solid var(--borderWidth) var(--primaryColor);

	border-bottom-left-radius: var(--borderWidth);
	border-bottom-right-radius: var(--borderWidth);

	position: relative;
}

div.popupFrame button {
	padding: 0.4em;
	font-size: 1rem;
}

div.popupFrame a {
	color: var(--secondaryLight);
}

div.popupFrame a:hover {
	color: var(--primaryLight);
	text-decoration: underline;
}

/* Banner styling. */

div.bannerHolder {
	width: calc(100vw - 1em);
	height: max-content;

	left: 0px;
	bottom: 0px;

	z-index: 6;
	position: fixed;
}

div.bannerFrame {
	height: max-content;
	max-height: 100vh;

	margin: calc(var(--spaceModifier) / 4);
	padding: calc(var(--spaceModifier) / 8);

	margin-left: calc(var(--spaceModifier) * 2);
	margin-right: calc(var(--spaceModifier) * 2);

	padding-right: var(--spaceModifier);

	background-color: var(--tertiaryDark);
	box-shadow: 0px 0px 2em var(--primaryDark);

	border: solid var(--borderWidth) var(--primaryColor);
	border-radius: var(--borderWidth);

	overflow: hidden;
	position: relative;
}

div.bannerFrame img.icon {
	margin: calc(var(--spaceModifier) / 4);
	font-size: 2.5rem;
	float: left;

	display: flex;
	flex-flow: column;
}

div.bannerFrame h2 {
	margin-bottom: -0.5em;
}

textArea, div.popupFrame input[type=text], div.popupFrame input[type=password], div.popupFrame input[type=email], div.popupFrame input[type=url] {
	width: calc(100% - (var(--spaceModifier) / 2));
}
/* Oooh, fancy custom scrollbar. */

::-webkit-scrollbar {
	width: 1em;
}

::-webkit-scrollbar-track {
	background-color: var(--tertiaryDark);
}

::-webkit-scrollbar-thumb {
	background-color: var(--quaternaryLight);
	border: solid var(--borderWidth) var(--tertiaryDark);
}

textArea, div.popupFrame input[type=text], div.popupFrame input[type=password], div.popupFrame input[type=email], div.popupFrame input[type=url] {
	width: calc(100% - (var(--spaceModifier) / 2));
}

/* Sets diffrent shades of colors on buttons,
depending on if they are being hovered on or not. */

button.green, button.yellow, button.blue, button.red, input[type=submit].green, input[type=submit].yellow, input[type=submit].blue, input[type=submit].red {
	color: var(--primaryDark);
}

button.green, input[type=submit].green {
	background-color: var(--secondaryGreen);
	border-color: var(--primaryGreen);
}

button.yellow, input[type=submit].yellow {
	background-color: var(--secondaryYellow);
	border-color: var(--primaryYellow);
}

button.blue, input[type=submit].blue {
	background-color: var(--secondaryBlue);
	border-color: var(--primaryBlue);
}

button.orange, input[type=submit].orange {
	background-color: var(--secondaryOrange);
	border-color: var(--primaryOrange);
}

button.red, input[type=submit].red {
	background-color: var(--secondaryRed);
	border-color: var(--primaryRed);
}

button.violet, input[type=submit].violet {
	background-color: var(--secondaryViolet);
	border-color: var(--primaryViolet);
}

button.green:hover, input[type=submit].green:hover {
	background-color: var(--tertiaryGreen);
	border-color: var(--secondaryGreen);
}

button.yellow:hover, input[type=submit].yellow:hover {
	background-color: var(--tertiaryYellow);
	border-color: var(--secondaryYellow);
}

button.blue:hover, input[type=submit].blue:hover {
	background-color: var(--tertiaryBlue);
	border-color: var(--secondaryBlue);
}

button.orange:hover, input[type=submit].orange:hover {
	background-color: var(--tertiaryOrange);
	border-color: var(--secondaryOrange);
}

button.red:hover, input[type=submit].red:hover {
	background-color: var(--tertiaryRed);
	border-color: var(--secondaryRed);
}

button.violet:hover, input[type=submit].violet:hover {
	background-color: var(--tertiaryViolet);
	border-color: var(--secondaryViolet);
}