/* Internal */
@font-face {
	font-family: 'Cairo-Play';
	src: url('../fonts/cairo-play.ttf');
}

:root {
	--reset: none;
	--reset0: 0;
	--font-size: small;
	--border-radius: 12pt;
	--generic-blur: blur(20px) saturate(120%);
	--background-color: #121212;
	--font-weight: 500;
	--font-mono: 'SF Mono', 'Source Code Pro', 'Menlo', 'Consolas', monospace;
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI Variable', 'Segoe UI', system-ui, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Droid Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
	--box-shadow: 10px 8px 15px #00000077;
	--text-light: white;
	--text-dark: #090909;
	--obj-generic-radius: 6pt;
	--obj-square-radius: 0;
	--obj-circle-radius: 50%;
	--obj-round-radius: 1024px;
	--obj-min-height: 12pt;
	--obj-min-width: 10pt;
	--obj-padding: 4pt 6pt;
	--obj-margin: 1pt 0 1pt 0;
	--obj-background: radial-gradient(ellipse at top right, #ffffff33 0%, #66666633 100%);
	/*Theme Controlled*/
	--theme-color1: #fd00c5;
	--hover-color: #ffffff45;
	--window-color: #212121;
	--window-invcolor: #eee;
	--text-color: white;
	--text-invcolor: #090909;
	--blur-color: #19191990;
	--border: 1px solid #ffffff65;
	--obj-shadow: 0 1px 2px #00000077;
	--background-image: url('../images/backdrop-d.jpg');
	--overlay-color: #ffffff25;

}

.theme-1 {
	--theme-color1: #005380;
	--hover-color: #00000065;
	--obj-shadow: 0 1px 2px #00000037;
	--window-color: #eee;
	--window-invcolor: #212121;
	--text-color: #090909;
	--text-invcolor: white;
	--blur-color: #eeeeeed0;
	--border: 1px solid #33333365;
	--background-image: url('../images/backdrop-l.jpg');
	--overlay-color: #ffffff45;
}

.clearfix {
	overflow: auto;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* HTML Structure */
html,
body {
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--font-ui);
	color: var(--text-color);
	font-weight: var(--font-weight);
	background-color: var(--background-color);
	font-size: var(--font-size);
	background-size: cover;
	background-attachment: fixed;
	user-select: none;
	background-image: var(--background-image);
}

/*4K*/
@media only screen and (min-width: 2560px) {
	html {
		zoom: 1.75;
	}
}

/*2K*/
@media only screen and (min-width: 1600px) {
	html {
		zoom: 1.25;
	}
}


/* Conditions */
.selectable {
	user-select: text;
}

.hidden {
	display: none;
	margin: 0;
	padding: 0;
}

.spoiler {
	background-color: var(--text-color);
	border-radius: 2pt;
	font-weight: normal;
}

.spoiler:hover {
	background-color: transparent;
	transition: ease-in-out .15s;
}


/* Path */
.path {
	margin: 6px 0;
	font-family: 'SF Mono', 'Source Code Pro', 'Menlo', 'Consolas', monospace;
	font-weight: normal;
	color: var(--text-color);
	text-transform: uppercase;
}

.path a {
	letter-spacing: 1pt;
}


/* List */
.list {
	display: grid;
	padding: 0;
	grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 8px;
}

.list a {
	text-align: center;
	text-transform: capitalize;
	font-size: 9pt;
	text-decoration: none;
	display: grid;
	padding: 8px;
	align-items: center;
	justify-content: center;
	border-radius: var(--obj-generic-radius);
	color: var(--text-color);
	background-color: var(--overlay-color);
	border: var(--border);
	box-shadow: var(--obj-shadow);
}

.list a:hover {
	background-color: var(--hover-color);
	transition: ease-out .15s;
	filter: none;
}


/* Credits */
.credits {
	margin: 0;
	color: var(--text-color);
	font-size: smaller;
	font-weight: lighter;
}


/* tabber.js */
.tabbertabhide,
.tabbertab a {
	display: none
}

ul.tabberpath {
	list-style: none;
	display: inline-flex;
	margin: 0;
	margin-bottom: 4pt;
	padding: 0;
	grid-template-columns: repeat(auto-fill, minmax(1.75in, 1fr));
}

ul.tabberpath a {
	padding: 1px 6px;
	text-decoration: none;
	font-size: 9pt;
	margin: 0 1pt;
	text-transform: capitalize;
	min-width: .75in;
	background-color: var(--overlay-color);
	border: var(--border);
	box-shadow: var(--obj-shadow);
	text-align: center;
	font-weight: 400;
	color: var(--text-color);
	border-radius: 2pt;
}

.tabbertab img,
.avatar {
	max-width: 100%;
	box-shadow: var(--obj-shadow);
	border: var(--border);
	border-radius: 2pt;
}

ul.tabberpath li.tabberactive a:link {
	background-color: var(--hover-color);
	transition: ease-out .15s;
}

ul.tabberpath li a:hover {
	background-color: var(--hover-color);
	transition: ease-out .15s;
	filter: none;
}




/* T-Block Table */
.tblock-t {
	text-align: left;
	width: 100%;
	padding: 0;
	border-spacing: 4pt;
	height: 100%;
}

.tblock-t td,
.tblock-t th {
	border: var(--border);
	background-color: var(--overlay-color);
	box-shadow: var(--obj-shadow);
	text-align: left;
	font-size: 9pt;
	padding: 4pt;
	border-radius: 3pt;
	color: var(--text-color);
	vertical-align: middle;
}

.tblock-t th {
	text-transform: uppercase;
	text-align: right;
	width: 1in;
	color: var(--theme-color1);
}

.tblock-t a {
	text-decoration: underline;
}





/* Stats */
.stats,
.stats td,
.stats th {
	text-align: center;
}


/* Elements */
audio {
	filter: invert();
	opacity: 50%;
}


/* Footer */
footer {
	text-transform: uppercase;
	text-align: center;
	color: var(--text-light);
	font-size: 9pt;
	margin-bottom: 32px;
	font-weight: normal;
	opacity: 75%;
}






















/*Prevent Oversize*/
@media only screen and (min-width: 1280px) {
	.content {
		margin: 256px;
		margin-top: 64px;
		margin-bottom: 32px;
	}
}

/*Normal Window*/
@media only screen and (min-width: 636px) {
	.content {
		margin-top: 64px;
	}

	.window {
		padding: 64px;
		margin: 32px;
		border: var(--border);
		background-color: var(--blur-color);
		border-radius: var(--obj-generic-radius);
		box-shadow: var(--box-shadow);
		backdrop-filter: var(--generic-blur);
	}

	.navi {
		border-bottom: var(--border);
		background: var(--blur-color);
		backdrop-filter: var(--generic-blur);
		box-shadow: var(--box-shadow);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1024;
		display: flex;
		justify-content: space-around;
	}

	.navi a {
		flex: 1;
		height: 32px;
		text-align: center;
		color: var(--text-color);
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navi a:hover {
		background-color: var(--hover-color);
		transition: ease-out 0.15s;
		filter: none;
		color: var(--text-light);
	}

	.hideondesktop {
		display: none;
		padding: 0;
		margin: 0;
		font-size: 0
	}

	.dblock,
	.tblock {
		padding: 64px;
		border: var(--border);
		background-color: var(--blur-color);
		border-radius: var(--obj-generic-radius);
		box-shadow: var(--box-shadow);
		backdrop-filter: var(--generic-blur);

	}

	.tblock {
		padding: 0;
	}

	.array {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(412px, 1fr));
		grid-gap: 32px;
		margin: 32px;
	}
}

/*Small Window*/
@media only screen and (max-width: 850px) {
	.hide {
		display: none;
		padding: 0;
		margin: 0;
		font-size: 0
	}

	.path {
		text-align: center;
	}

	.title {
		text-align: center;
	}
}

/*Compact*/
@media only screen and (max-width: 635px) {
	body {
		background-color: var(--blur-color);
		backdrop-filter: blur(20pt) saturate(120%);
		-webkit-backdrop-filter: blur(20pt) saturate(120%);
		padding: 32px;
	}

	.tabbertab img,
	.avatar {
		width: 100%;
		margin: 0;
	}

	.infopane {
		width: 100%;
		box-shadow: var(--obj-shadow);
	}

	.navi {
		flex-wrap: wrap;
		display: grid;
		padding: 0;
		grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
		grid-auto-rows: minmax(0, auto);
		grid-gap: 6px;
		margin: 32px 0;
	}

	.navi a {
		color: var(--text-color);
		text-decoration: none;
		font-size: 11pt;
		font-weight: bold;
		display: grid;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: var(--obj-generic-radius);
		background-color: var(--overlay-color);
		border: var(--border);
		box-shadow: var(--obj-shadow);
	}

	.navi a:hover {
		background-color: var(--hover-color);
		transition: ease-out .15s;
		transform: scale(.96);
		filter: none;
	}

	.tblock-t td,
	.tblock-t th {
		border-radius: 3pt;
	}

	.dblock {
		border-radius: var(--obj-generic-radius);
		padding: .1in;
		margin: .1in;
	}

	.tblock-t {
		text-align: left;
		border-spacing: 2pt;
		box-shadow: var(--obj-shadow);
		border: var(--border);
		border-radius: 4pt;
	}

	.title {
		text-align: center;
	}
}


/*Text Formatting*/

h1,
h2,
h3,
h4,
h5,
p,
ul {
	margin: 32px 0;
}

.pre {
	font-family: 'SF Mono', 'Source Code Pro', 'Menlo', 'Consolas', monospace;
}

hr {
	border: var(--border);
}

h1,
h2 {
	font-family: 'Cairo-Play';
}

h2 {
	border-bottom: var(--border);
}

p {
	color: var(--text-color);
}

x {
	font-size: small;
	font-weight: lighter;
}

li x {
	font-size: inherit;
	font-weight: inherit;
}

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

.footnote {
	font-size: 50%;
	vertical-align: top;
	content: '+';
}

a:hover {
	transition: ease-out 0.15s;
	filter: brightness(1.2);
}



.title {
	margin: 0;
}



/*Tag Formatting*/
.taglist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
	grid-gap: 2px;
}

.tag {
	text-align: center;
	padding: 2px 6px;
	letter-spacing: 1pt;
	text-transform: uppercase;
	font-size: 7pt;
	color: var(--text-light);
	border-radius: 3pt;
	box-shadow: var(--obj-shadow);
	background: radial-gradient(ellipse at top right, #cccccc40 0%, #00000040 100%);
	border: 1px solid #ffffff65;
}

.tag:hover {
	transition: ease-out 0.15s;
	filter: brightness(1.2);
}