* { margin: 0; padding: 0; }

html, body { overflow-x: hidden; }
body {
	display: flex;
	flex-flow: column nowrap;
	height: 100vh;
	background: var(--blue-soft);
}

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

header {
	flex: 1 1 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 12px;
	h1 { font-family: w95; }
}

main {
	flex: 16 1 0;
	display: flex;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0px 12px;
	background: url("../img/space-pixels.png");
	font-family: comic-sans;
	color: var(--white);
}

footer {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	padding: 0px 12px;
	p { font-family: w95; }
	a { color: var(--blue); }
	a:hover { color: var(--teal); }
	a:visited { color: var(--purple); }
}


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

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

nav {}


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

section.feed {
	display: flex;
	flex-flow: column nowrap;
	min-width: 300px;
	max-width: 400px;
	overflow-x: scroll;
	padding: 8px;
	background: var(--sky-315);
	hgroup.heading {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 4px 8px; 
		background: var(--white75);
		color: var(--black);
		img { width: 150px; height: 100px; object-position: top; object-fit: cover; }
	}
	article {
		background: var(--white50);
		hgroup {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			gap: 4px;
			background: var(--grey80);
			border: 3px outset var(--grey20);
			img { width: 50px; height: 40px; object-position: top; object-fit: cover; }
			h3 { font-family: nds-bios; color: var(--white); }
		}
		p {
			padding: 4px;
			color: var(--black);
			font-family: ibm-vga;
		}
	}
}

section.content {
	display: flex;
	width: 100%;
	flex-flow: column wrap;
}

/* Custom Article Styling */

article.overview {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 2px dashed var(--blue-soft);
	div.education {
		display: flex;
		align-items: center;
		padding: 4px 80px;
		width: 350px;
		p { line-height: 1; color: var(--white);}
	}
}

article.starwars {
	max-width: 250px;
	border: 8px double var(--yellow);
	color: var(--yellow);
	hgroup { 
		display: flex; flex-flow: column nowrap; align-items: center;
		h2 {
			font-family: comic-sans;
			font-size: 26pt;
			text-align: center;
		}
	}
}

article { margin: 8px; }

aside {}
details {}
summary {}


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

dialog {}


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

div {}
span {}


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

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

hgroup {}

h1, h2, h3, h4, h5, h6 { line-height: 1; }

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

p {
	font-family: comic-sans;
	line-height: 1;
}

/********************************************************************
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 {}
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 {}