* { margin: 0; padding: 0; }

body {
	overflow-x: hidden;
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	background-image: var(--overlay-black50), url("../img/space-pixels.png");
	font-family: LibMono-Reg;
	color: var(--white);
}

/********************************************************************
TOP-LEVEL CONTAINERS
********************************************************************/

header {
	display: flex; 
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	padding: 12px 8px;
	background: var(--yellow);
	color: var(--black);
	text-align: center;
	@media only screen and (max-width: 767px) { img { height: 50px; } }
	@media only screen and (min-width: 768px) { img { height: 60px; } }
	@media only screen and (min-width: 992px) { img { height: 70px; } }
	h1 { line-height: 1; padding: 8px 0px 0px 0px; }
}

main {
	flex: 1 1 0;
	overflow-x: scroll;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-self: center;
	@media only screen and (max-width: 991px) { gap: 24px; }
	max-width: 1200px;
}

footer {
	display: flex;
	justify-content: space-between;
	padding: 8px;
	background: var(--black);
	border-top: 1px solid var(--yellow);
	p { 
		@media only screen and (max-width: 767px) { font-size: 12pt; }
		@media only screen and (min-width: 768px) { font-size: 12pt; }
		@media only screen and (min-width: 992px) { font-size: 14pt; }
		font-family: w95;
		color: var(--grey20); 
	}
}

/*****************************************************************************/
/*                                                                           */
/*                           SECTIONING TAGS                                 */
/*                                                                           */
/*       (nav, section, article, aside, details, dialog, div, span)          */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
NAVIGATION MENUS
********************************************************************/

nav {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	@media only screen and (max-width: 991px) { gap: 8px; }
	@media only screen and (min-width: 992px) { gap: 24px; }
	ul.sites {
		display: flex;
		@media only screen and (max-width: 767px) { flex-flow: row wrap; }
		@media only screen and (min-width: 768px) { flex-flow: row wrap; }
		@media only screen and (min-width: 992px) { flex-flow: row nowrap; }
		justify-content: center;
		gap: 12px;
		li {
			border-radius: 6px;
			box-shadow: 0px 0px 8px var(--grey40) inset;
			background: var(--grey10);
			border: 4px solid var(--grey40);
			a {
				display: block;
				padding: 10px 24px;
				color: var(--black);
				font-family: w95;
				font-size: 22pt;
				@media only screen and (max-width: 991px) { text-align: center; }
			}
		}
		li:hover {
			background: var(--grey20);
			border: 4px solid var(--blue);
			a {
				color: var(--black);
			}
		}
	}
	ul.social {
		display: flex;
		justify-content: center;
		@media only screen and (max-width: 767px) { flex-flow: row wrap; }
		@media only screen and (min-width: 768px) { flex-flow: row wrap; }
		@media only screen and (min-width: 992px) { flex-flow: row nowrap; }
		gap: 12px;
		li {
			border: 1px solid var(--grey10);
			border-radius: 4px;
			background: var(--black75);
			img {
				@media only screen and (max-width: 767px) { height: 18px; }
				@media only screen and (min-width: 768px) { height: 22px; }
				@media only screen and (min-width: 992px) { height: 24px; }
			}
			a {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: 14px;
				padding: 6px 12px;
				color: var(--white);
				font-family: ibm-vga;
				@media only screen and (max-width: 767px) { font-size: 18pt; }
				@media only screen and (min-width: 768px) { font-size: 20pt; }
				@media only screen and (min-width: 992px) { font-size: 22pt; }
			}
		}
		li:hover {
			border: 1px solid var(--yellow);
			a {
				color: var(--blue-soft);
			}
		}
	}
}

/********************************************************************
CONTENT SECTIONS
********************************************************************/

article {}
aside {}
details {}
summary {}
section {}


/********************************************************************
DIALOGS AND POP-UPS
********************************************************************/

dialog {}


/********************************************************************
NON-SEMANTIC SECTIONS
********************************************************************/

div {}
span {}


/*****************************************************************************/
/*                                                                           */
/*                           TEXT CONTENT TAGS                               */
/*                                                                           */
/*          (headings, paragraphs, links, quotes, formatted, raw)            */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
HEADINGS and PARAGRAPHS
********************************************************************/

hgroup {
	margin: 16px;
	padding: 16px;
	text-align: center;
	background: var(--black50);
	box-shadow: 0px 0px 16px var(--white25);
	border-radius: 8px; 
	h2 { 
		padding: 4px 0px 12px 0px;
		font-family: LibMono-Bold;
		color: var(--yellow);
	}
	p { font-family: News-Reg; }
}

h1 {
	font-family: LibMono-Bold;
}
h2 {}

h3 {
	font-family: LibMono-BoldItalic;
}

h4 {}

h5 {}

h6 {}

p {}

/********************************************************************
HYPERLINKS
********************************************************************/

a {}
a:hover {}
a:visited {}
a:active {}
a:disabled {}


/********************************************************************
QUOTATIONS
********************************************************************/

q {}
blockquote {}
cite {}


/********************************************************************
FORMATTED TEXT
********************************************************************/

address {}
time {}
abbr {}
dfn {}
mark {}
sub {}
sup {}
s {}
ins {}
del {}


/********************************************************************
RAW TEXT
********************************************************************/

pre {}
code {}
samp {}
data {}

/*****************************************************************************/
/*                                                                           */
/*                               LAYOUT TAGS                                 */
/*                                                                           */
/*                     (horizontal lines, lists, tables)                     */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
HORIZONTAL LINES
********************************************************************/

hr {}


/********************************************************************
LISTS
********************************************************************/

ul {
	padding: 8px;
	list-style: none;
	li {
		a { text-decoration: none; }
	}
}
ol {}
li {}
dl {}
dt {}
dd {}


/********************************************************************
TABLES
********************************************************************/

table {}
caption {}
thead {}
tbody {}
tfoot {}
tr {}
th {}
td {}
col {}
colgroup {}


/*****************************************************************************/
/*                                                                           */
/*                                FORM ELEMENTS                              */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

form {}

/********************************************************************
FIELDS
********************************************************************/

input {}
select {}
selectedcontent {}
option {}
textarea {}


/********************************************************************
INFORMATION
********************************************************************/

label {}
legend {}
progress {}
fieldset {}
optgroup {}
datalist {}
meter {}
output {}


/********************************************************************
BUTTONS
********************************************************************/

button {}
button:hover {}


/*****************************************************************************/
/*                                                                           */
/*                                 MULTIMEDIA                                */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

img {}
area {}
map {}
audio {}
track {}
video {}
svg {}
figure {}
figcaption {}
picture {}
source {}


/*****************************************************************************/
/*                                                                           */
/*                                MISCELLANEOUS                              */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

/* Math Tags */
math {}
var {}
data {}

/* Embedded Content Tags */
embed {}
fencedframe {}
iframe {}
object {}

/* Ruby Tags */
ruby {}
rp {}
rt {}

/* Browser Info */
wbr {}
kbd {}
bdi {}
bdo {}

/* Scripts */
canvas {}
script {}
noscript {}

/* Other */
slot {}
template {}