/* ------ global variables ------ */

:root {

	--link-color:		#FFD21A;
	--link-color-hover:	#D9AE03;

	--link-color-post:	#1a47ff;
	--link-color-post-hover: #032ed9;

	--bg-color-dark:	#323232;
	--bg-color-darker:	#000000;
	--bg-color-light:	#9D9D9D;
	--bg-color-lighter:	#EFEFEC;

	--ff-sans-serif:	"Nunito", sans-serif;
	--ff-monospace: 	"Source Code Pro", monospace;

	--border-style:		black solid thin;
	--box-shadow:		10px 10px 50px rgba(0, 0, 0, 0.9);
	--box-shadow-small:	0px 2px 5px rgba(0, 0, 0, 0.4);
	--text-shadow:		2px 1px 1px rgba(0, 0, 0, 1);
}

/* ------ document ------ */

@media (prefers-color-scheme: light) {
	body {
		background-image: url('/assets/img/bg-pattern-white.jpg');
		background-repeat: repeat;
		background-position: center; 
		background-attachment: fixed;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-image: url('/assets/img/bg-pattern.jpg');
		background-repeat: repeat;
		background-position: center; 
		background-attachment: fixed;
	}
}

body {
	color:				#EFEFEC;
	font-family:		var(--ff-sans-serif);
	overflow-y:			scroll;
}

/* ------ text styles ------ */

h1 {
	font-size:			1.75em;
	font-weight:		bold;
}

h2 {
	font-size:			1.5em;
	font-weight:		bold;
}

h3 {
	font-size:			1.25em;
	font-weight:		bold;
}

h4 {
	font-size:			1em;
	font-weight:		bold;
}

h5 {
	font-size:			0.875em;
	font-weight:		bold;
}

h6 {
	font-size:			0.85em;
	font-weight:		bold;
}

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

a:hover {
	color:				var(--link-color-hover);
}

strong, b {
	font-weight:		bold;
}

em, i {
	font-style:			italic;
}

ul {
	display:			block;
	list-style-type:	square;
	margin-block-start:	0.5em;
	margin-block-end:	0.75em;
	margin-inline-start:0px;
	margin-inline-end:	0px;
	padding-inline-start:2em;
}

/* ------ key blocks ------ */

kbd {
	font-family:		var(--ff-monospace);
/*	border-radius:		3px;*/
	background-clip:	padding-box;
	border:				1px solid var(--bg-color-light);
	box-shadow:			var(--box-shadow-small);
	color:				var(--bg-color-lighter);
	background-color:	var(--bg-color-darker);
	padding:			0px 3px;
	display:			inline-block;
}

/* ------ code blocks ------ */

code {
	font-family:		var(--ff-monospace);
/*	border-radius:		3px;*/
	background-clip:	padding-box;
	border:				1px solid var(--bg-color-light);
	box-shadow:			var(--box-shadow-small);
	padding:			0px 3px;
	display:			inline-block;
}

div.highlight > pre > code {
	padding:			16px;
	display:			block;
}

.highlight {
	overflow:			hidden;
	font-family:		var(--ff-monospace);
/*	border-radius:		3px;*/
	background-clip:	padding-box;
	border:				1px solid var(--bg-color-light);
	box-shadow:			var(--box-shadow-small);
	margin-block-end:	1em;
}

/* ------ misc classes ------ */

.button {
	font-family:		var(--ff-monospace);
	border:				1px solid var(--bg-color-light);
	box-shadow:			var(--box-shadow-small);
	padding-block:		16px;
	padding-inline:		24px;
	margin:				16px;
	display:			inline-block;
	text-transform:		uppercase;
	transition:			background-color 0.3s ease-out, color 0.3s ease-out;
	text-shadow:		none;
}

.button:hover {
	background-color:	var(--bg-color-lighter);
/*	color:				black;*/
}

/* ------ site classes ------ */

.site-header {
	background-color:	var(--bg-color-darker);
/*	background-color:	#393939;*/
	padding:			1.25rem 0;
	box-shadow:			var(--box-shadow-small);
}

.site-container {
	margin:				0 auto;
	max-width:			1337px;
	min-width:			600px;
	position:			relative;
}

.site-footer {
	margin:				24px;
	padding:			32px;
	background-color:	var(--bg-color-dark);
	text-align:			center;
	font-family:		var(--ff-sans-serif);
	box-shadow:			var(--box-shadow);
	border:				var(--border-style);
}

/* ------ navigation classes ------ */

.site-navigation {
	margin:				0 auto;
	width:				100%;
	text-align:			center;
	padding-inline-start:0;
	list-style:			none;
}

.site-navigation li {
	display:			inline-block;
}

.site-navigation-text {
	font-family:		var(--ff-sans-serif);
	font-size:			1.5em;
}

.site-navigation li + li:before {
	content:			" | ";
	padding:			0 10px;
}

/* ------ hero classes ------ */

.site-hero video {
	position:			absolute;
	z-index:			-1;
	width:				100%;
}

.site-hero-bg-other {
	background-image:	url('/assets/img/000007.png');
	background-repeat:	no-repeat;
	background-size:	cover;
}

.site-hero-bg-error {
	background-image:	url('/assets/img/000001.png');
	background-repeat:	no-repeat;
	background-size:	cover;
}

.site-hero-bg {
	background-image:	url('/assets/img/000001.png');
	background-repeat:	no-repeat;
	background-size:	cover;
}

.site-hero {
	margin-top: 		24px;
	min-height:			260px;
	border:				var(--border-style);
	box-shadow:			var(--box-shadow);
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	space-evenly;
	overflow:			hidden;
	position:			relative;
}

@media (min-width:900px) {
	.site-hero {
		flex-wrap:		nowrap;
	}
}

.site-hero-section {
	align-items:		center;
	display:			flex;
	flex-direction:		column;
	justify-content:	space-evenly;
	margin:				24px;
	padding:			32px;
	text-align:			center;
	text-shadow:		var(--text-shadow);
}

.site-hero-section article {
	padding:			16px;
	width:				100%;
}

.site-hero-logo {
	min-width:			300px;
}

.site-hero-logo p {
	min-width:			600px;
	text-shadow:		var(--text-shadow);
}

.site-hero-logo img {
	width:				400px;
}

.site-hero-title {
	min-width:			600px;
}

.site-hero-download {
	backdrop-filter:	blur(10px);
	background-color:	rgba(0,0,0,0.6);
	border:				var(--border-style);
	box-shadow:			var(--box-shadow-small);
	min-width:			600px;
}

.site-hero-download-info {
	text-align:			center;
}

.site-hero-download-requirements {
	background-color:	rgba(255,210,26,0.2);
	border:				var(--border-style);
	box-shadow:			var(--box-shadow-small);
	text-align:			left;
}

/* ------ post classes ------ */

.post-container {
	color:				black;
	margin:				24px;
	background-color:	red;
	font-family:		var(--ff-sans-serif);
	box-shadow:			var(--box-shadow);
	border:				var(--border-style);
}

.post-header-container {
	padding:			16px;
	background-color:	var(--bg-color-light);
	border-bottom:		var(--border-style);
}

.post-header-title {
	text-shadow:		var(--text-shadow);
	text-transform:		uppercase;
}

.post-body-container {
	padding:			32px;
	background-color:	var(--bg-color-lighter);
}

.post-body-container p {
	margin-block-end:	1em;
}

.post-body-container a {
	color:				var(--link-color-post);
	text-decoration:	none;
}

.post-body-container a:hover {
	color:				var(--link-color-post-hover);
}