* { 
	margin: 0; 
	padding: 0;
	x-overflow: hidden;
}

html {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://assets.davidjardine.ca/img/space/space.jpg");
	padding: 100px;
	display: flex;
	justify-content: center;
}

body {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 50px;
	padding: 25px;
	max-width: 1200px;
}

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

header {
	align-self: center;
	max-width: 1000px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 24px;
	color: var(--white);
	hgroup {
		h1 { color: var(--yellow); }
		h2 { margin: 25px 0px 0px 0px; font-family: LibMono-Italic, monospace; }
	}
	p { background: var(--black75); border-radius: 24px; padding: 50px; }
}

main {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 24px;
	margin: 100px 0px 0px 0px;
	padding: 24px;
	border-radius: 12px;
	background: var(--black75);
	hgroup {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		color: var(--white);
	}
	ul.links {
		align-self: stretch;
		list-style: none;
		display: flex;
		flex-flow: column nowrap;
		align-items: stretch;
		gap: 24px;
		
		li {
			background: var(--white90);
			border-radius: 4px;
			a {
				display: flex;
				gap: 8px;
				text-decoration: none;
				font-family: LibMono-Reg, monospace;
				border-radius: 4px;
				h4 {
					flex: 1 1 0;
					background: var(--white);
					color: var(--black);
					padding: 12px;
					border-radius: 4px 0px 0px 4px;
				}
				div {
					flex: 4 1 0;
					display: flex;
					flex-flow: column nowrap;
					justify-content: center;
					p {
						color: var(--black);
						padding: 4px;
					}
					p.url { color: var(--grey70); }
					span.query { color: var(--grey40); }
				}
			}
		}
		li:hover {
			background: var(--white75);
			a {
				h4 { background: var(--white25); }
				p.url { color: var(--black); }
				span.query { color: var(--black75); }
			}
		}
		li.pinned {
			background: var(--white);
			a {
				outline: 8px solid var(--orange);
				h4::before { content: "\1F4CC"; display: flex; flex-flow: row nowrap; }
			}
		}
		li.pinned:hover {
			background: var(--white90);
			a {
				outline: 8px solid var(--orange-bright);
			}
		}
	}

}

footer {
	padding: 25px;
	background: var(--black);
	color: var(--white);
}

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

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

nav {
	display: flex;
	flex-flow: column nowrap;
	background: var(--white90);
	border-radius: 8px;
	ul {
		display: flex;
		align-items: center;
		gap: 25px;
		list-style: none;
		color: var(--black);
	}
	ul.sites {
		padding: 8px;
		justify-content: space-between;
		li {
			padding: 24px 16px;
			a {
				padding: 8px 16px;
				font-family: LibMono-Bold, monospace;
				font-size: 18pt;
				text-decoration: none;
				border: 2px solid var(--black25);
				outline: 1px solid var(--grey70);
				border-radius: 4px;
				color: var(--black);
				background: var(--white);
				box-shadow: 0px 0px 15px var(--black25) inset;
			}
			a:hover {
				border: 2px solid var(--blue);
				color: var(--grey80);
			}
		}
	}
	ul.secondary {
		justify-content: center;
		background: var(--white90);
		padding: 18px 12px;
		border-radius: 0px 0px 6px 6px;
		li {
			padding: 4px;
			a {
				padding: 8px 16px;
				font-family: LibMono-Reg, monospace;
				text-decoration: none;
				color: var(--black);
				border-radius: 4px;
				box-shadow: 0px 0px 4px var(--black) inset;
			}
			a:hover {
				text-decoration: underline;
				box-shadow: 0px 0px 4px var(--black25) inset;
			}
		}
	}
}

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

h1,h2,h3,h4,h5,h6 { font-family: LibMono-Bold, monospace; font-weight: 900; }
p,a,li { font-family: Garamond-Reg, monospace; }


/* RESPONSIVE TEXT SIZING */

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    h1 { font-size: 42pt; }
    h2 { font-size: 24pt; }
    h3 { font-size: 20pt; }
    h4 { font-size: 16pt; }
    h5,h6 { font-size: 14pt; }
    p { font-size: 11pt; }
    p.xs { font-size: 7pt; }
    p.sm { font-size: 9pt; }
    p.lg { font-size: 15pt; }
    p.xl { font-size: 21pt; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
	h1 { font-size: 48pt; }
	h2 { font-size: 24pt; }
	h3 { font-size: 20pt; }
	h4 { font-size: 16pt; }
	h5 { font-size: 12pt; }
	h6 { font-size: 12pt; }
    p { font-size: 12pt; }
    p.xs { font-size: 8pt; }
    p.sm { font-size: 10pt; }
    p.lg { font-size: 14pt; }
    p.xl { font-size: 20pt; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
	h1 { font-size: 56pt; }
	h2 { font-size: 28pt; }
	h3 { font-size: 24pt; }
	h4 { font-size: 20pt; }
	h5 { font-size: 16pt; }
	h6 { font-size: 16pt; }
    p { font-size: 16pt; }
    p.xs { font-size: 12pt; }
    p.sm { font-size: 14pt; }
    p.lg { font-size: 20pt; }
    p.xl { font-size: 26pt; }
}


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

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

/* RESPONSIVE TEXT SIZING */

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    a { font-size: 11pt; }
    a.xs { font-size: 7pt; }
    a.sm { font-size: 9pt; }
    a.lg { font-size: 15pt; }
    a.xl { font-size: 21pt; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    a { font-size: 12pt; }
    a.xs { font-size: 8pt; }
    a.sm { font-size: 10pt; }
    a.lg { font-size: 14pt; }
    a.xl { font-size: 20pt; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    a { font-size: 16pt; }
    a.sm { font-size: 14pt; }
    a.med { font-size: 16pt; }
    a.lg { font-size: 20pt; }
    a.xl { font-size: 26pt; }
}

/********************************************************************
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 {
	padding: 8px 16px;
	font-family: LibMono-Bold;
	font-size: 18pt;
	text-decoration: none;
	border: 2px solid var(--black25);
	outline: 1px solid var(--grey70);
	border-radius: 4px;
	color: var(--black);
	background: var(--white);
	box-shadow: 0px 0px 15px var(--black25) inset;
}
button:hover {
	border: 2px solid var(--blue);
	color: var(--grey80);
}

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