/*	.nav a:not(.active) {display: none;} */

/* variables */
:root {
	--font-color: #b7d7e3;
	--link-color: #1eaedb;
	--link-color-hover: #1e9fc7;
	--border-radius: 10px;
	--border-width: 1px;
	--padding: 8px; /* used for margin and padding, sometimes multiplied */
	--bgcolor1: #000000; /* background color 1, black */
	--bgcolor2: #222222; /* background color 1, dark gray */
	/* Larger fonts on small screens */
	--fontsize: 18px; /* Font-size */
	--fontsizeres: 20px; /* Font-size responsive */
	--h1: 40px; /* Heading Header only */
	--h2: 28px; /* Heading large */
	--h2res: 30px; /* Heading large responsive */
	--h3: 25px; /* Heading medium */
	--h3res: 27px;  /* Heading medium responsive */
	--h4: 22px;  /* Heading small */
	--h4res: 24px;  /* Heading small responsive */
}

/* fonts */
@font-face {
	font-family: "VT323"; /* Font family */
	src: url("fonts/VT323-Regular.ttf");
	font-weight: 400; 
	font-style: normal;
}

/* Make body able to fill screen vertical */
html {
	height: 100%;
}
/* Global page settings */
body {
	min-height: 100%; /* Fill screen vertical */
	margin: 0px;
	/* Background solid */
	background-image: url("images/bg.png");
	background-repeat: repeat;
	background-color: var(--bgcolor1);
	 /* Font settings */
	font-family: "VT323"; /* Font family */
	color: var(--font-color); /* Font color */
	font-size: var(--fontsize); /* Basic font size */
	text-transform: uppercase; /* All text uppercase */
/*	text-shadow: 0 0 1px #ffffff; /* Text shadow */
/*	filter: blur(.5px); /* Text blur */
	line-height: 1.0; /* no line padding /*
	/* Special FX settings, see EOF */
	animation: scanlines infinite 10s linear;
}

/*Common elements*/
a { /* Links */
	color: var(--link-color);
	text-decoration: none;
}
a:hover { /* Links on hover */
	color: var(--link-color-hover);
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
}
h1 {
	font-size: var(--h1);
}
h2 {
	font-size: var(--h2);
}
h3 {
	font-size: var(--h3);
}
h4 {
	font-size: var(--h4);
}
ul {
	margin-top: var(--padding);
	margin-bottom: var(--padding);
	padding-left: calc(var(--padding) * 4)
}

/* Main page wrap */
.wrap {
	padding: calc(var(--padding) * 3); /* larger padding for non-responsive */
	max-width: 1200px; /*maximum width*/
	margin: auto; /* center content */
}

/* Header */
.head {
	padding: var(--padding);
	position: relative;
}
.head a {
	color: var(--font-color); /* Font color */
}
.head a:hover {
	color: var(--font-color); /* Font color */
	text-decoration: none;
}
.head .home { /* Logo and sitename */
	width: 200px;/* adjust to fit content if linewrap */
}
.head .home .logo { /* Logo */
	float: left;
	padding-right: calc(var(--padding) * 2);
}
/* .head .clock  {
	position: absolute;
	right: 0;
	bottom: 0;
} */
.head .ql { /* right menu icons, QuickLinks */
	position: absolute;
	right: 0px;
	top: calc(var(--padding) - 1px);
	padding: var(--padding);
	padding-right: 0px;
	margin-right: calc(var(--padding) * 2);
}
.head .ql a {
	color: var(--link-color);
}
.head .ql a:hover {
	color: var(--fontcolor);
/*	cursor: wait; */
}
.head .ql a i { /* Fontawesome icons */
	font-size: var(--h2);
}
@media screen and (max-width: 600px){
	.head {
		position: fixed;
		top: calc(var(--padding) * 0);
		left: calc(var(--padding) * -1);
		width: calc(100% - 1 * var(--padding));
		padding: calc(var(--padding) * -1));
		background-color: var(--bgcolor1);
		border-bottom: 1px solid var(--link-color);
		box-shadow: 0px var(--padding) var(--padding) var(--bgcolor1);
	}
	.head.responsive {
		border-bottom: 1px solid transparent;
	}
	.head .home { /* Logo and name */
		margin-left: calc(var(--padding) * 1);
	}
	.head .ql { /* QuickLinks move to the left */
		position: absolute;
		right: calc(var(--padding) * 7);
	}
	.head .ql a {
		display: none;
		color: var(--link-color);
	}
	.head.responsive .ql a {
		display: block;
	}
}

/* Menu, responsive */
.nav {
	overflow: hidden;
	margin-bottom: calc(var(--padding) * 2);
}
.nav a {
	float: left;
	display: block;
	text-align: center;
	font-size: var(--fontsizeres);
	text-decoration: none;
	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius);
	padding: var(--padding);
	margin-right: calc(var(--padding) * 1.5);
}
.nav a:hover {
	border: var(--border-width) solid var(--link-color-hover);
	color: var(--link-color-hover);
	box-shadow: 0 0 4px #ffffff; /* Box shadow */
}
.nav a.active {
	border: var(--border-width) solid var(--font-color);
	color: var(--font-color);
	box-shadow: 0 0 4px #ffffff; /* Box shadow */
}
.nav a i { /* Fontawesome icons */
	font-size: calc(var(--fontsize) - 3px);
}
.nav a i.fa-solid.fa-bars { /* responsive menu button */
	font-size: var(--h2);
}
.nav .icon {
	display: none;
}
.nav .ronly { /* Links only visible responsive */
	display: none;
}
.nav a.icon {
	color: var(--font-color); /* Font color */
}
.nav a.icon:hover {
		border: var(--border-width) solid transparent;
		box-shadow: none;
}
@media screen and (max-width: 600px) {
	.nav {
		padding-top: calc(var(--padding) * 5);
	}
	.nav a {
		display: none;
		margin-bottom: var(--padding);
	}
	.nav a.icon { /* responsive menu button */
		display: block;
		margin-right: 0px;
		margin-top: 0px;
		position: fixed;
		right: calc(var(--padding) * 2);
		top: calc(var(--padding) * 1 - 2px);
		color: var(--link-color);
	}
	.nav.responsive a.icon {
		background-color: var(--bgcolor2);
		border-radius: var(--border-radius);
		color: var(--font-color);
		border: var(--border-width) solid var(--link-color);
	}
	.nav .flyout a:first-of-type { /* First menu entry (home) */
		display: none;
	}
	.nav.responsive .flyout { /* make menu float above */
		position: fixed;
		z-index: 2;
		left: 0;
		top: calc(var(--padding) * 7);
		width: 100% ;
		height: calc(100% - var(--padding) * 7);
		padding-bottom: 0;
		backdrop-filter: blur(2px);
		background: rgba(2, 2, 2, 0.8);
		}
	.nav .flyout a {
		width: calc(100% - 5 * var(--padding));
		margin-left: calc(var(--padding) * 1 - 2px ); /* minus border */
		margin-right: var(--padding);
		border: var(--border-width) solid var(--link-color);
		margin-top: calc(var(--padding) * 0.5);
		margin-bottom: calc(var(--padding) * 1.5);
		}
	.nav.responsive a {
		float: none;
		display: block;
		text-align: left;
		margin-right: 0px;
	}
	.nav.responsive a:hover {
		box-shadow: none;
	}
	.nav.responsive a.active {
		box-shadow: none;
		border: var(--border-width) solid var(--font-color);
	}
}

/* Layout elements */
.cont {
/*
	max-height: 580px;
	overflow: hidden auto;
	scrollbar-color: var(--font-color) var(--bgcolor2);
	scrollbar-width: thin;
*/
}
.cont h2, h3, h4, h5, h6 {
	padding-bottom: calc(var(--padding)* 2);
}
.cont div {
}
.cont .col-1 {
	float: left;
	width: 32%;
	padding-right: 1.3%;
}
.cont .col-2 {
	float: left;
	width: 65%;
	padding-right: 1.6%;
}
.cont .col-3 {
	float: left;
	width: 99.9%;
}
.cont .clear {
	clear: left;
	padding-bottom: var(--padding);
	max-height: 0px; 
}
@media screen and (max-width: 992px){
	.cont {
		max-height: 100% !important;
		overflow: visible !important;
	}
	.cont .col-1 {
		clear: left;
		float: none;
		width: 100%;
		padding: 0px;
	}
	.cont .col-2 {
		clear: left;
		float: none;
		width: 100%;
		padding: 0px;
	}

}
@media screen and (max-width: 768px){
	.cont .col-1 {
		width: 100%;
		padding: 0px;
	}
	.cont .col-2 {
		width: 100%;
		padding: 0px;
	}
	.cont .col-3 {
		clear: left;
		float: none;
		width: 100%;
		padding: 0px;
	}
}
@media screen and (max-width: 600px){
	.wrap {
		padding: calc(var(--padding) * 2); /* Smaller padding for responsive */
	}
	.cont div .cell-cont {
		hyphens: manual !important; 
		text-align: left !important;
	}
	/* Larger fonts for small screens */
	body {
		font-size: var(--fontsizeres) !important;
	}
	h2 {
		font-size: var(--h2res) !important;
	}
	h3 {
		font-size: var(--h3res) !important;
	}
	h4 {
		font-size: var(--h4res) !important;
	}
}

/* Cell element */
.cell-head {
	padding-bottom: 0px;
}
.cell-head h2 i {
	font-size: calc(var(--h2) * 0.8 );
}
.cell-head h3 i {
	font-size: calc(var(--h3) * 0.8 );
}
.cell-head h4 i {
	font-size: calc(var(--h4) * 0.8 );
}
.cell-cont {
	padding-right: var(--padding);
	margin-right: 0px;
	padding-bottom: 0px;
	margin-bottom: calc(var(--padding) * 2);
	hyphens: auto; 
	text-align: justify;
}
.cell-cont i {
	font-size: calc(var(--fontsize) * 0.8 );
}
.cell-cont h2 i {
	font-size: calc(var(--h2) * 0.8 );
}
.cell-cont h3 i {
	font-size: calc(var(--h3) * 0.8 );
}
.cell-cont h4 i {
	font-size: calc(var(--h4) * 0.8 );
}

/* Footer */
.foot {
	margin-top: var(--padding);
	width: fit-content;
}
.foot i {
	font-size: calc(var(--fontsize) * 0.8 );
}

/* SPEACIAL FX SETTINGS */
/* CRT scanline animation */
.scanline {
	float: left;
	width: 100%;
	height: 40px;
	z-index: 8;
	background: linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(200,255,255,.4) 10%,rgba(0,0,0,.1) 100%);
	opacity: .2;
	position: fixed;
	bottom: 0;
	animation: refresh 0s linear infinite;
	animation-name: refresh;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	}
@keyframes refresh{0%{bottom:100%}40%{bottom:100%}100%{bottom:0px}}
/* CRT flickering */
.flickering {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2;
	background: repeating-linear-gradient(90deg,rgba(255,0,0,0.08) 0px 1px,rgba(0,255,0,0.08) 1px 2px ,rgba(0,0,255,0.08) 2px 3px),repeating-linear-gradient(0deg,transparent 0px 1px, rgba(0,0,0,0.4) 1px 2px);
	opacity:0;
	pointer-events:none;
	animation:flicker 0.02s infinite;
}
@keyframes flicker{
	0%{opacity:0.5}
	5%{opacity:0.7}
	10%{opacity:0.9}
	15%{opacity:0.5}
	20%{opacity:0.4}
	25%{opacity:0.4}
	30%{opacity:0.3}
	35%{opacity:0.5}
	40%{opacity:0.6}
	45%{opacity:0.5}
	50%{opacity:0.3}
	55%{opacity:0.4}
	60%{opacity:0.7}
	65%{opacity:0.9}
	70%{opacity:0.7}
	75%{opacity:0.4}
	80%{opacity:0.5}
	85%{opacity:0.7}
	90%{opacity:0.6}
	95%{opacity:0.9}
	100%{opacity:1}
}