@import url(custom_html.css);

@font-face {
	font-family : 'JB mono';
	src         : url(/resources/fonts/JB_Mono.woff2);
}

:root {
	--c-back-main       : #2F2F2F;
	--c-header          : #111;
	--c-back-head       : #232323;
	--c-back-head-split : #474747;
	--c-gray-help       : #3B3B3B;
	--c-back-light      : #6D6D6D;

	--c-white-text      : #DDD;
	--c-dark-text       : #111;

	--c-thumb           : #626262;
	--c-null            : #00000000;
	--c-split           : #5A5A5A;
	--c-comment         : #6A6A6A;

	--shadow            : 0 0 10px #00000080;
	--shadow-inset      : inset var(--shadow);
	--border-radius     : 10px;

	--c-red-d           : #9A0D0D;
	--c-red             : #D73838;
	--c-red-l           : #FF0F0F;
	--c-red-f           : #DEA7A7;
	--c-green-d         : #186134;
	--c-green           : #459B51;
	--c-green-l         : #38AF61;
	--c-green-f         : #94C4A4;
	--c-blue-d          : #0162AC;
	--c-blue            : #459CC9;
	--c-blue-l          : #0EBDFF;
	--c-blue-f          : #9AB3CD;
	--c-gold-d          : #A96602;
	--c-gold            : #CF8B14;
	--c-gold-l          : #FFC70E;
	--c-gold-f          : #CDBF9A;
	--c-purple-d        : #570085;
	--c-purple          : #6F3B8B;
	--c-purple-l        : #CB76FF;
	--c-purple-f        : #EAC3FF;
	--c-magenta-d       : #713070;
	--c-magenta         : #BA53B8;
	--c-magenta-l       : #E753E5;
	--c-magenta-f       : #C9A9C8;
	--c-gray-d          : #3A3A3A;
	--c-gray            : #626262;
	--c-gray-l          : #858585;
	--c-gray-f          : #B7B7B7;
}

* {
	font-family : 'JB mono', monospace;
	font-size   : 12pt;
	color       : white;
	box-sizing  : border-box;
	padding     : 0;
	margin      : 0;
	border      : 0;
}

::-webkit-scrollbar-thumb {
	background-color : var(--c-thumb);
	border           : 4px solid var(--c-header);
}

::-webkit-scrollbar-track {
	background : transparent;
}

body {
	background-size  : 5rem 5rem;
	background-color : var(--c-header);
	background-image : repeating-radial-gradient(
			#222, #222 1rem,
			#272727 1rem, #272727 2rem,
			#2B2B2B 2rem, #2B2B2B 3rem);
	color            : white;
	padding          : 0;
	margin           : 0;
	display          : flex;
	flex-direction   : column;
}

*:focus {
	outline : none;
}


button * {
	background : var(--c-null);
	color      : white;
}

main {
	margin         : 0;
	overflow-y     : scroll;
	white-space    : normal;
	display        : flex;
	flex-direction : column;
	padding        : 1rem 1rem 30dvh 1rem;
	align-items    : center
}

header {
	position        : sticky;
	top             : 0;
	padding         : .5rem 4rem;
	min-height      : 48px;
	display         : flex;
	flex-direction  : row;
	flex-wrap       : wrap;
	gap             : .5rem;
	align-items     : center;
	justify-content : center;
	background      : var(--c-header);
	z-index         : 2;
}

header > div {
	display         : flex;
	flex-direction  : row;
	flex-wrap       : wrap;
	gap             : .5rem;
	align-items     : center;
	justify-content : center;
}

#icon-text {
	font-size   : 32px;
	font-family : Impact, sans-serif;
	fill        : #FFF;
}

#icon-text tspan {
	font-size   : 32px;
	font-family : Impact, sans-serif;
	fill        : #000;
}

#icon-cin {
	fill           : #FFF;
	animation-name : icon-anim;
}

#icon-c, #icon-r {
	fill : #4670B1;
}

#icon {
	left     : 8px;
	top      : 8px;
	bottom   : 8px;
	position : fixed;
	height   : calc(10vh - 16px);
}

[title], u, a:not([class]), [title] *, u *, a:not([class]) * {
	text-decoration : none;
}

a.not_a_text, a.not_a_text * {
	text-decoration : none;
	color           : white
}

#az-nav-subfield-top {
	background     : var(--c-back-head);
	display        : flex;
	flex-direction : row;
	gap            : .75rem;
	padding        : 1rem 1rem 1rem 5rem;
}

#az-nav-subfield-top a {
	display         : inline-block;
	height          : 2rem;
	line-height     : 2rem;
	padding         : 0 0.5rem;
	margin          : 0.5rem 0;
	border-radius   : 50px;
	cursor          : pointer;
	text-decoration : none;
}

#az-nav-subfield-list {
	width   : 100%;
	padding : 1rem;
}

#az-nav-subfield-list a {
	display         : block;
	height          : 2.5rem;
	line-height     : 2.5rem;
	padding         : 0 1rem;
	margin-bottom   : 1rem;
	border-radius   : 50px;
	text-align      : center;
	cursor          : pointer;
	text-decoration : none;
}

#az-nav-subfield-top, #az-nav-subfield-list {
	margin : 0;
	border : none;
}

nav {
	display    : block;
	background : var(--c-back-main);
	top        : 0;
	bottom     : 0;
	position   : fixed;
	z-index    : 99;
	box-shadow : 0 0 1rem black;
}

nav:has(#navhider:checked) {
	animation : 0.5s slidein;
	left      : 0;
}

nav:has(#navhider:not(:checked)) {
	animation : 1s slideout;
	left      : -100vw;
}

@keyframes slidein {
	from {
		left : -100vw;
	}

	to {
		left : 0;
	}
}

@keyframes slideout {
	from {
		left : 0;
	}

	to {
		left : -100vw;
	}
}

ul ::marker {
	content : '• ';
}

.tree > li::marker {
	content : none
}

.tree ul > li::marker {
	content : '├─';
	color   : var(--c-split);
}

.tree ul > li:last-child::marker {
	content : '└─';
}

.tree ul, .tree ol {
	counter-reset : section;
	padding-left  : 1rem;
}

#hsl {
	cursor        : pointer;
	z-index       : 100;
	left          : 0;
	top           : 0;
	position      : fixed;
	text-align    : center;
	line-height   : 3rem;
	transform     : rotate(90deg);
	background    : var(--c-back-main);
	visibility    : visible !important;
	width         : 3rem;
	height        : 3rem;
	display       : block;
	box-shadow    : 0 0 1rem black;
	transition    : 400ms;
	border-radius : 0 1.5rem 0 0;
}

#hsl:hover {
	box-shadow : 0 0 1rem var(--c-magenta);
}

#navhider:checked ~ #hsl {
	box-shadow    : 0 0 1rem var(--c-magenta-d);
	background    : var(--c-magenta);
	border-radius : 1.5rem;
	left          : 1rem;
	top           : 1rem;
}

#navhider:checked ~ #hsl:hover {
	background : var(--c-magenta-l);
}

textarea {
	background : var(--c-back-main);
}

.unselectable, #hsl {
	-webkit-touch-callout : none; /* iOS Safari */
	-webkit-user-select   : none; /* Chrome/Safari/Opera */
	-khtml-user-select    : none; /* Konqueror */
	-moz-user-select      : none; /* Firefox */
	-ms-user-select       : none; /* Internet Explorer/Edge */
	user-select           : none; /* Non-prefixed version, currently not supported by any browser */
}

::-webkit-scrollbar-corner {
	background-color : transparent;
}

#popup_upload {
	background    : var(--c-blue);
	position      : absolute;
	overflow-y    : scroll;
	margin        : 0;
	padding       : 0;
	border        : none;
	z-index       : 9999;
	border-radius : 10px;
	display       : grid;
}

#popup_upload > input {
	top      : 0;
	bottom   : 0;
	right    : 0;
	left     : 0;
	opacity  : 0;
	width    : 100%;
	position : absolute;
}

#popup_upload > div {
	text-align : center;
	border     : none;
	align-self : center;
}

#popup_upload::-webkit-scrollbar {
	display : none;
}

.relative {
	position : relative
}

@media screen and (max-width : 800px) {
	::-webkit-scrollbar {
		width  : 10px;
		height : 10px;
	}

	::-webkit-scrollbar-thumb {
		border-radius : 5px;
		border-width  : 2px;
	}

	* {
		font-size : 9pt;
	}

	main {
		padding            : 1rem;
		-ms-overflow-style : none; /* for Internet Explorer, Edge */
		scrollbar-width    : none; /* for Firefox */
		overflow-y         : scroll;
	}

	main::-webkit-scrollbar {
		display : none;
	}

	#popup_upload {
		top    : 100px;
		bottom : 100px;
		right  : 5%;
		left   : 5%;
	}
}

@media screen and (min-width : 800px) {
	::-webkit-scrollbar {
		width  : 18px;
		height : 18px;
	}

	::-webkit-scrollbar-thumb {
		border-radius : 9px;
		border-width  : 4px;
	}

	#popup_upload {
		top    : 100px;
		bottom : 200px;
		right  : calc(50vw - 200px);
		left   : calc(50vw - 200px);
	}
}