/*
	THIS STYLESHEET CONTAINS GLOBAL STYLES USED BY MOST PAGES
*/

/*
	Z-INDEX HIERARCHY

	65536: #intro (index.html)
	32768: #modal-container (backlog.html)
	16: #rec-up, #rec-down (records.html)
	0: baseline

*/

/* The best sizing */
* {box-sizing:border-box}

/* Global style */
html {scrollbar-color:#00f #000}
body {
	margin:0;padding:0;
	background-image:     url("/img/mat/scan.png");
	background-attachment:fixed;
	background-position:  center;
	background-size:      cover;
	background-color:     #000;
	animation:segmentflicker 7s ease infinite alternate-reverse;
	color:#fff;
	font-family:monospace; /* Fallback font */
	text-align:center;
    scrollbar-color:#00f #000
}
	@keyframes segmentflicker {
		0%  {opacity: .8 }
		26% {opacity: .88}

		55% {opacity: .8 }
		56% {opacity: .87}
		57% {opacity: .8 }
		59% {opacity: .86}
		60% {opacity: .89}
	
		100%{opacity: .8 }}

::selection {color:#00f}

/* Links */
a {
	color:#0f0;
	text-decoration-line:underline overline;
	font-weight:bold;
}
a:hover {
	cursor:pointer;
}

/* Navigation */
#navigation {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	height:150px;
	border-bottom:5px solid #a7a7a759;
	/* Link shared styles */
	& > a {
		width:100%;
		opacity:0.9;
		background-size:100% 100%;
		&:hover {background-color:#f00;transition:0.5s all ease-in-out;opacity:1}}
	/* Links */
	& > a:nth-child(1) { /* HUB */
		background-image:url("/img/mat/I.gif");
		&:hover{background-image:url("/img/mat/Ih.gif")}

	}
	& > a:nth-child(2) { /* RECORDS */
		background-image:url("/img/mat/II.gif");
		&:hover{background-image:url("/img/mat/IIh.gif")}
		
	}
	& > a:nth-child(3) { /* ARCHIVE */
		background-image:url("/img/mat/III.gif");
		&:hover{background-image:url("/img/mat/IIIh.gif")}
		
	}
	& > div { /* VIEWPORT */
		display:grid;
		grid-template-rows:1fr auto;
		padding:5px 5px 0 5px;
		background-image:url("/img/mat/red.gif");
		& a {
			opacity:0.9;
			background-image:url("/img/mat/IIII.gif");
			background-size:100% 100%;
			&:hover {background-image:url("/img/mat/IIIIh.gif")}
		}
		#vp-switch {
			font-family:BP_Typ,monospace;
			font-weight:bold;
			font-size:0.8em;
			padding:3px;
			cursor:pointer;
			user-select:none;
			&:hover {color:#f00;background-color:#fff}
			&.disabled {display:none}
		}
		/* VIEWPORT - "CONTINUE" switch */
		&.continue a {
			background-image:url("/img/mat/IIIIb.gif");
			&:hover {background-image:url("/img/mat/IIIIhb.gif")}
		}
	}
}

/* Resize navigation height to avoid excessive stretching */
@media only screen and (width <= 1500px) {
	#navigation {height:100px!important}
}