/* GENERAL RULES (READY) */
html {
	--app-blue-color:	rgb(50,150,225);
	--app-dark-color:	rgb(50,60,70);
	--app-font-size:	min(24px,4vw);
	--app-gray-color:	rgb(170,180,190);
	--app-green-color:	rgb(150,200,0);
	--app-orange-color:	rgb(255,150,125);
	--app-red-color:	rgb(225,125,150);
	font-size:			var(--app-font-size) !important;
	font-family:		philosopher !important;
}
body {
	background:			url(grain.png);
	scrollbar-width:	thin;
	scrollbar-color:	var(--pure-input-border-color) transparent;
}
a {
	color:	var(--pure-theme-color);
}
ul {
	padding:	0;
}
li {
	list-style-position:	inside;
}
h5 {
	margin:			1rem 0;
	font-weight:	normal;
	font-size:		1.25rem;
	text-align:		center;
	color:			var(--pure-theme-color);
}
h6 {
	margin:			1rem 0;
	padding:		0.25rem;
	font-weight:	normal;
	font-size:		1rem;
	text-align:		center;
	color:			#FFF;
	background:		var(--pure-theme-color);
}
input[type="file"] {
	display:	none;
}



/* FADING IN ON LOAD IMAGES (READY) */
img.fading {
	display:	block;
	width:		100%;
	opacity:	0;
	transition:	opacity 0.5s ease;
	object-fit:	cover;
}
img.fading[src*="noimage"] {
	object-fit:	contain;
}
img.fading.loaded {
	opacity:	1;
}



/* COLOR VARIATIONS (READY) */
.red {
	color:		#FFF !important;
	background:	var(--app-red-color) !important;
}
.teal {
	color:		#FFF !important;
	background:	var(--pure-theme-color) !important;
}
.gray {
	color:		#FFF !important;
	background:	var(--app-gray-color) !important;
}
.dark {
	color:		#FFF !important;
	background:	var(--app-dark-color) !important;
}
.light {
	color:		var(--pure-theme-color) !important;
	background:	#FFF !important;
}
.orange {
	color:		#FFF !important;
	background:	var(--app-orange-color) !important;
}
.blue {
	color:		#FFF !important;
	background:	var(--app-blue-color) !important;
}
.green {
	color:		#FFF !important;
	background:	var(--app-green-color) !important;
}



/* HALF PURE INPUT AND POPUP CONTROL (READY) */
.reduced {
	display:		inline-block;
	width:			50%;
	vertical-align:	top;
}
.control {
	display:	flex;
	width:		100%;
	margin-top:	1rem;
}
.control > pure-button {
	flex-grow:	1;
}



/* FORCED DISPLAY NONE CLASS (READY) */
.hideme {
	display:	none !important;
}



/* APP CONTAINER (READY) */
#app {
	display:		grid;
	position:		relative;
	left:			0;
	height:			100%;
	transition:		left 0.25s ease;
	place-items:	center;
}
#app > div[data-page-container] {
	width:	100%;
}