/* ================= */
/* |GLOBAL VARIABLES */
/* ================= */
:root
{
	/* CLR PALS */
	/* HEX CLR OPACITY TABLE: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
	--bgclr_main: #93ced4;
	--bgclr_navbar: #a6d6da;
	--bgclr_navbar_li: #b8d8de;
	--bgclr_navbar_li_hover: #ffedd7;
	--bgclr_bottom_txt: rgba(147, 206, 212, 0.5);
	--bgclr_blogarea: #fae1a1;
	--clr_txt: #525e88;
	--shadow: #474c84;
	--shadow_med: #474c8480;
	--shadow_light: #474c8440;
	
	/* HYPERLINK CLR PAL */
	--hyplnk: #607ec4;
	--hyplnk_visited: #c46d53;
	--hyplnk_hover: #7fa1e8;
	--hyplnk_active: #ffffff;
}

/* ============ */
/* |TEXT FONTS| */
/* ============ */
	/* VN Px series by 40Nix (https://www.youtube.com/watch?v=0vbyjCM7GBs) */
	@font-face{
		font-family: "VN PxBlackletter";
		src:
			url("fonts/VN_PxBlackletter/VNPxBlackletter.eot?") format("eot"),
			url("fonts/VN_PxBlackletter/VNPxBlackletter.ttf") format("truetype"),
			url("fonts/VN_PxBlackletter/VNPxBlackletter.woff") format("woff"),
			url("fonts/VN_PxBlackletter/VNPxBlackletter.svg#VNPxBlackletter") format("svg");
		font-display: swap;
		font-weight: normal;
		font-style: normal;
	}

	@font-face
	{
		font-family:"VN PxBlackletter Thin";
		src:
			url("fonts/VN_PxBlackletter_Thin/VNPxBlackletterThin.eot?") format("eot"),
			url("fonts/VN_PxBlackletter_Thin/VNPxBlackletterThin.ttf") format("truetype"),
			url("fonts/VN_PxBlackletter_Thin/VNPxBlackletterThin.woff") format("woff"),
			url("fonts/VN_PxBlackletter_Thin/VNPxBlackletterThin.svg#VNPxBlackletterThin") format("svg");
		font-display: swap;
		font-weight: normal;
		font-style: normal;
	}

	@font-face
	{
		font-family: "VNPPxCopperplate";
		src:
			url("fonts/VNPPXCopperplate/VNPPxCopperplate.eot?") format("eot"),
			url("fonts/VNPPXCopperplate/VNPPxCopperplate.ttf") format("truetype"),
			url("fonts/VNPPXCopperplate/VNPPxCopperplate.woff") format("woff"),
			url("fonts/VNPPXCopperplate/VNPPxCopperplate.svg#VNPPxCopperplate") format("svg");
		font-display: swap;
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face
	{
		font-family: "VnPxKana";
		src:
			url("fonts/VnPxKana/VnPxKana.eot?") format("eot"),
			url("fonts/VnPxKana/VnPxKana.ttf") format("truetype"),
			url("fonts/VnPxKana/VnPxKana.woff") format("woff"),
			url("fonts/VnPxKana/VnPxKana.svg#VnPxKana") format("svg");
		font-display: swap;
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face
	{
		font-family: "jackeyfont";
		src:
			url("fonts/jackeyfont/jackeyfont.eot?") format("eot"),
			url("fonts/jackeyfont/jackeyfont.ttf") format("truetype"),
			url("fonts/jackeyfont/jackeyfont.woff") format("woff"),
			url("fonts/jackeyfont/jackeyfont.svg#jackeyfont") format("svg");
		font-display: swap;
		font-weight: normal;
		font-style: normal;
	}


/* ========= */
/* |CONTENT| */
/* ========= */
	/* BODY & CONTAINER STYLES */
.container_index
{
	background: var(--bgclr_main);
	padding-left: 7.75em;
	
	font-family: "VNPPxCopperplate";
	font-size: 2em;
	color: var(--clr_txt);
	text-shadow:
		0.1ex 0.1ex 0px var(--shadow_light);
}

.container_centered
{
	display: block;
	justify-content: center;
	text-align: center;
	
	background:	var(--bgclr_main);
	background-attachment: fixed; 
	margin: 0;
	padding: 0;
	
	font-family: "VNPPxCopperplate";
	font-size: 2em;
	color: var(--clr_txt);
	text-shadow:
		0.1ex 0.1ex 0px var(--shadow_light);
}

.footer
{
	background-color: var(--bgclr_bottom_txt);
	
	padding-left: 0.5em;
	padding-right: 0.25em;
	padding-top: 0.5em;
	width: 18em;
	
	border: 2px hidden;
	border-radius: 25px;
	
	box-shadow:
		1px 1px 1px var(--shadow);
	
	font-family: "VN PxBlackletter Thin";
	font-size: 1em;
}

	/* HORIZONTAL LINE STYLE */
.hr1
{
	border: 2px solid var(--clr_txt);
	border-radius: 16px;
	margin-left: 0;
	max-width: 100vw;
}

.hr2
{
	border: 1px dashed var(--clr_txt);
	margin-left: 0;
	max-width: 100vw;
}

	/* HEADER STYLES */
h1, h2
{
	font-family: "VN PxBlackletter";
}

h3, h4, h5, h6
{
	font-family: "VN PxBlackletter Thin";
}

.h1_nospace
{
	height: 16px;
}

.h2_nospace
{
	height: 8px;
}

.h3_nospace
{
	height: 4px;
}

.hdr_underline
{
	text-decoration: underline;
}

	/* PARAGRAPH STYLES */


	/* LIST STYLES */
ul
{
	margin-left: 0;
	padding-left: 1em;
	text-align: left;
	list-style-type: "+ ";
	list-style-position: outside;
}

li
{
	font-family: "VN PxBlackletter Thin";
}


	/* NAVIGATION BAR STYLES */
.navbar_left
{
	background:	var(--bgclr_navbar);
	background-attachment: fixed;
	
	padding-left: 0em;
	margin: 0;
	
	border-right: 4px double var(--shadow);
	box-shadow:
		1px 0px 4px var(--shadow);
	
	overflow: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 9em;
}

.navsect_left
{
	font-family: "VN PxBlackletter";
	font-size: 1.5em;
	color: var(--clr_txt);
	text-decoration: underline;
	padding-left: 16px;
	padding-top: 0;
	
	margin-top: 0;
	margin-bottom: 1rem;
	height: 2rem;
}

.navbar_left li
{
	font-family: "VN PxBlackletter Thin";
	font-size: 1em;
	word-wrap: break-word;
	
	background: var(--bgclr_navbar_li);
	
	margin-left: 0;
	margin-bottom: 10px;
	margin-right: 1em;
	padding-left: 0.1em;
	border-top: 1px solid var(--shadow);
	border-bottom: 1px solid var(--shadow);
	border-left: 1px solid var(--shadow);
	border-right: 16px solid var(--shadow);
	box-shadow:
		2px 2px 1px var(--shadow_med);
}

.navbar_left li:hover
{
	background: var(--bgclr_navbar_li_hover);
}

.navbar_left li:active
{
	background: var(--shadow);
}


	/* HYPERLINK STYLES */
a
{
	text-decoration: none;
}

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

a:visited
{
	color: var(--hyplnk_visited);
}

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

a:active
{
	color: var(--hyplnk_active);
}

	/* IMAGE STYLES */
.neocities
{
	width: 160px;
	border-radius: 16px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.pattern_top
{
	background:	var(--bgclr_main);
	background-image: url(src/img/pattern_top.gif);
	background-repeat: no-repeat;
	background-blend-mode: screen;
	padding-top: 0;
}

.pattern
{
	transition:	font-size .15s ease-in-out;
	background-image: url(src/img/pattern.gif);
	background-repeat: repeat-y;
	background-blend-mode: screen;
}

.navbg
{
	background-image: url(src/img/namukou1_frug_1080p.jpg);
	background-blend-mode: lighten;
}

.notfound
{
	transition: all .15s ease-in-out; 
	background-image: url(src/img/asciigirl.jpg);
	background-blend-mode: screen;
}

.bg00
{
	transition: all .15s ease-in-out; 
	background-image: url(src/img/namukou2_frug_1080p.jpg);
	background-blend-mode: screen;
}

.bg01
{
	transition: all .15s ease-in-out; 
	background-image: url(src/img/namukou_viktormacabro_1080p.jpg);
	background-blend-mode: screen;
}

	/* MISC STYLES */
.m-space
{
	height: 2em;
}

.l-space
{
	height: 4em;
}