@import url('/css/fonts.css');
body,html{
	padding:0;
	margin:0;
}
:root{
}
html{
	--accent-color-0:#FF6F00;
	--accent-color-1:pink;
	--accent-color-2:#60ea80;
	--accent-color-3:#FF1920;
	--accent-color-4:#49a0ff;
	--accent-color-5:#09bf9a;
	--accent-color-6:#aa0fef;
	--accent-color-7:#e0d030;
	--accent-color-8:#607D8B;
	--accent-color-9:#6D4C41;
	--accent-color-10:#C0dA33;
	--custom-accent-color:var(--accent-color-0);
	--user-accent-color:var(--accent-color-0);	
	--page-bg-color:white;
	--page-bg:url('/assets/backgrounds/darkforest.jpg');
	--page-bg-size:cover;
	--page-bg-position:50%;
	--page-bg-repeat:no-repeat;
	--content-bg:#f4f4f4;
	--text-color-header:var(--user-accent-color);
	--text-color-panel-header:black;
	--button-color:white;
	
	--dark-text-color:#333;
	--light-text-color:white;
	
	--main-text-color:var(--dark-text-color);
	
	font-size:12pt;
	--main-font-set:"Josefin Sans", helvetica, sans-serif;
	--aux-font-set:helvetica, sans-serif;
	
	--on-accent-text-color:white;
}

html[data-accent-color="0"]{
	--user-accent-color:var(--accent-color-0);	
}
html[data-accent-color="1"]{
	--user-accent-color:var(--accent-color-1);	
	--on-accent-text-color:#222;
}
html[data-accent-color="2"]{
	--user-accent-color:var(--accent-color-2);	
	--on-accent-text-color:#222;
}
html[data-accent-color="3"]{
	--user-accent-color:var(--accent-color-3);	
}
html[data-accent-color="4"]{
	--user-accent-color:var(--accent-color-4);	
}
html[data-accent-color="5"]{
	--user-accent-color:var(--accent-color-5);	
}
html[data-accent-color="6"]{
	--user-accent-color:var(--accent-color-6);	
}
html[data-accent-color="7"]{
	--user-accent-color:var(--accent-color-7);	
	--on-accent-text-color:#222;
}
html[data-accent-color="8"]{
	--user-accent-color:var(--accent-color-8);	
}
html[data-accent-color="9"]{
	--user-accent-color:var(--accent-color-9);	
}
html[data-accent-color="10"]{
	--user-accent-color:var(--accent-color-10);	
	--on-accent-text-color:#222;
}
html[data-accent-color="-1"]{
	--user-accent-color:var(--custom-accent-color);	
}
body,label{
  font-family: var(--main-font-set);
  font-optical-sizing: auto;
  font-weight: thicker;
  font-style: normal;
}

html[data-darkmode="1"]{
	--page-bg-color:#222;
	--text-color-panel-header:white;
	--text-color:var(--dark-text-color);
	--content-bg:#222;
}

html[data-accentlight="1"]{
	
}
body{
	background:var(--page-bg);
	background-color:var(--page-bg-color);
	background-size:var(--page-bg-size);
	display:flex;
	flex-direction:column;
	height:100vh;
	position:relative;
	z-index:-3;
	
}

a{
	color:var(--user-accent-color);
	text-decoration-color:transparent;
}
a:hover{
	color:color-mix(in srgb,black 20%,var(--user-accent-color));
}
#bg-image{
	background:var(--page-bg);
	background-size:var(--page-bg-size);
	background-position:var(--page-bg-pos);
	background-repeat:var(--page-bg-repeat);
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index:-2;	
}

div.input_box{
	border-radius:0.5rem;
	background-color:white;
	border:0.063rem solid var(--user-accent-color);
	box-sizing:border-box;
	height:1.5rem;
	display:flex;
	align-items:center;
	padding:0 .25rem;
	filter:drop-shadow(.125px .125px .25px black);
}

div.input_box>input{
	color:black;
	font-size:.917rem;
	background:transparent;
	border:none;
	padding:0;
	margin:0;
	height:1.5em;
}
input,textarea,select{
	font-family:var(--aux-font-set);
	color:#333;
	font-size:.75rem;
}
input[type='file']{
	color:var(--main-text-color);
}
div.input_box>input:focus{
  outline: none;
 }
 
div.input_box:focus-within {
	border-color:color-mix(in srgb,white 30%,var(--user-accent-color));
	margin:0px;
	box-shadow:0 0 .25em 0 var(--user-accent-color);
}

button{
	min-width:3.75em;
	min-height:1.75em;
	font-size:1rem;
	background:var(--button-color);
	border:none;
	border-radius:.75em;
	box-shadow:0.063em 0.063em .25em 0 black;
	margin:0px 0.0625rem 0.0625rem 0;
	padding:.25em .75em;
}

button.small_button{
	font-size:.85rem;
	min-width:2.75em;
	min-height:1.25em;
}

span.small_text{
	font-size:.85rem;
}
button:hover{
	
}

button:not(.disabled):active{
	filter:brightness(.875) contrast(1.15);
	box-shadow:-0.063em -0.063em .25em 0 #222;
	margin:0.0625rem 0 0 0.0625rem;
	padding:calc(.25em + 0.0625rem / 2) .75em calc(.25em - 0.0625rem / 2) .75em;
}

.hidden:not(.no-hide){
	display:none!important;
}


.hidden-by-width:not(.no-hide){
	width:0;
	max-width:0!important;
}

main{
	color:var(--text-color);
	display:flex;
	justify-content:center;
	flex-grow:1;
	z-index:-1;
	position:relative;
}

main>#main-content{
	min-width:70vw;
	max-width:90vw;
	height:100%;
	box-sizing:border-box;
	overflow-y:auto;
	padding:.75em 1.25em;
	background-color:var(--content-bg);
	border-left:.125em ridge var(--light-text-color);
	border-right:.125em ridge var(--light-text-color);
	box-shadow:0 0 .5em .188em black;
}

h1{
	color:var(--text-color-header);
	font-size:42pt;
}
.user-badge{
	margin-left:.65em;
	margin-bottom:1.5em;
	position:relative;
	width:fit-content;
	font-size:.75rem;
	
}

.user-badge>img{
	width:2rem;
}

.user-badge::after{
	position:absolute;
	left:calc(100% + .35em);
	top:-.45em;
	color:var(--user-accent-color);
	padding:.125em .35em;
	border-radius:.25em;
	background:#ccc;
	box-shadow:.1em .15em .35em 0em #333333aa;
	opacity:0;
	transition:opacity .15s;
	transition-delay:.35s;
	white-space:nowrap;
	
	
}
.user-badge:hover::after{
	opacity:1;
}

.user-badge[data-badge="0"]::after{
	
}
.user-badge[data-badge="1"]::after{
	
}
.user-badge[data-badge="2"]::after{
	content:"Supporter";
}
.user-badge[data-badge="100"]::after{
	content:"Moira - The Site Creator";
	background:var(--accent-color-1);
	color:#c94262;
}

.subtext{font-size:.8rem;}

#main-content .banner{
	height:0;
}

select{
	/*background-color:red;*/
}

.select2-selection__arrow{
	height:calc(1.5rem - 2px)!important;
}
.select2-selection__rendered{
	line-height:1.5rem!important;
}
.select2-selection--single{
	height:1.5rem!important;
}
.select2-search__field{
	height:1.35rem;
	font-size:.8rem;
}
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open .select2-dropdown,
.select2-dropdown--below,
.select2-container--classic .select2-selection--single:focus{
	border-color:var(--user-accent-color)!important;

}

.twogrid{
	display:grid;
	grid-template-columns:repeat(2,max-content);
	grid-gap:.125rem;
}
.twospan{
	grid-column:1/-1;
}
@media (max-aspect-ratio:10/9){
	
	main > #main-content{
		min-width:90vw;
		max-width:100vw;
		padding:.25em .5em;
	}
	
	html{
		font-size:18pt;
	}
	
}
@media (max-aspect-ratio:7/10) {
	
	html{
		font-size:38pt;
	}
	
	main > #main-content{
		min-width:90vw;
		max-width:100vw;
		padding:.25em .5em;
	}
}


@media (max-width:612px) {
	
	html{
		font-size:20pt;
	}
	
	main > #main-content{
		min-width:90vw;
		max-width:100vw;
		padding:.25em .5em;
	}
}