* { 
	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: 50px;
	display: flex;
	justify-content: center;
}

body {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 25px;
	background: rgb(242 240 216 / 90%);
	padding: 25px;
	max-width: 1200px;
}

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

header {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	a.site-title {
		text-decoration: none;
		color: var(--black);
	}
	a.site-title:hover {
		color: var(--grey60);
	}
	nav {
		align-self: stretch;
		display: flex;
		justify-content: center;
		border-top: 3px solid black;
		border-bottom: 1px solid black;
		ul {
			display: flex;
			list-style: none;
			gap: 50px;
			li {
				a {
					color: black;
					text-decoration: none;
				}
				a:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

main {
	align-self: center;
	width: 80%;
}

footer {
	border-top: 3px solid black;
	padding: 25px;
	display: flex; flex-flow: row nowrap;
	justify-content: space-between; align-items: baseline;
	h4, p { padding: 4px; }
}


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

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

nav {

}




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

article {}

aside {}

details {
	summary {
		background: black;
		color: white;
	}
}

section { 

}



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

dialog {}


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

div {}
span {}

div.info-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    background: var(--black10);
    padding: 10px 20px;
    p { padding: 0; }
}

div.job-tags {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    p {
        font-size: 12pt;
        font-family: LibMono-Reg, monospace;
        padding: 3px 6px;
        margin: 10px 0px 0px 0px;
        border-radius: 10px;
        color: var(--grey80);
        outline: 1px solid var(--grey60);
    }
}

span.note {
    font-size: 0.9em;
    font-family: Garamond-Italic, serif;
    font-style: italic;
}
/*****************************************************************************/
/*                                                                           */
/*                           TEXT CONTENT TAGS                               */
/*                                                                           */
/*          (headings, paragraphs, links, quotes, formatted, raw)            */
/*                                                                           */
/*****************************************************************************/

/* HEADINGS */
h1,h2,h3,h4,h5,h6 { font-family: LibMono-Bold, monospace; }

h1,h2 { padding: 25px 0px 20px 0px; }
h3,h4,h5,h6 { padding: 20px 0px 10px 0px; }

hgroup {
	padding: 10px;
	h1,h2,h3,h4,h5,h6 { padding: 4px; }
}

/* PARAGRAPH and BODY TEXT */
p,a,li { font-family: Garamond-Reg, serif; }

p { padding: 0px 0px 15px 0px }

/********************************************************************
RESPONSIVE TEXT SIZING
********************************************************************/

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    h1 { font-size: 36pt; }
    h2 { font-size: 24pt; }
    h3 { font-size: 20pt; }
    h4 { font-size: 16pt; }
    h5,h6 { font-size: 14pt; }
    p,li { font-size: 14pt; }
    p.sm { font-size: 12pt; }
    p.med { font-size: 14pt; }
    p.lg { font-size: 18pt; }
    p.xl { font-size: 22pt; }
}

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

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



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

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


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

q {
	font-family: Garamond-Italic;
}

blockquote {
	margin: 15px;
	padding: 5px 5px 5px 25px;
	border-left: 5px solid var(--grey50);
    font-family: Garamond-Italic;
}

cite {
	font-size: 11pt;
	a {
		font-size: 11pt;
	}
}
cite::before { content: "[source: "; }
cite::after { content: "]"; }


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

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

ins {
    font-weight: 700;
    color: var(--sm-green);
}

del {
    font-weight: 700;
    color: var(--sm-red);
}


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

pre {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
	border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--grey20);
}

code {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
	background: var(--grey70);
    color: var(--white);
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--black);
}

samp {}
data {}

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

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

hr { margin: 50px 0px; }

hr.thin-black { border-top: 1px solid var(--black); }


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

ul, ol, dl { margin: 10px }

ul {}

ul.technical {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	gap: 25px;
	li { 
		padding: 10px 15px;
		background: var(--white50);
		box-shadow: 2px 2px 5px var(--black50);
		border-radius: 10px;
		h4, p { padding: 0; }
	}
}

ul.transferrable {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	gap: 25px;
	li { 
		display: flex;
		align-items: center;
		gap: 25px;
		padding: 20px;
		box-shadow: 0px 0px 5px var(--black) inset;
		border-radius: 10px;
		h4, p { padding: 0; }
	}
}

ul.images {
	list-style: none;
	li {
		display: flex;
		border-bottom: 1px solid var(--black);
		padding: 25px 0px;
		a {
			background: var(--black);
			color: var(--white);
			padding: 6px 10px;
			border-radius: 5px;
			text-decoration: none;
			font-family: LibMono-Bold, monospace;
			font-weight: bold;
		}
		a:hover {
			background: var(--black50);
		}
		img {
			max-height: 350px;
			padding: 20px;
			aspect-ratio: 1 / 1;
		}
	}
}

ul.courses {
	list-style: none;
	display: flex;
	flex-flow: column nowrap;
	gap: 25px;
	li {
		display: flex;
		align-items: center;
		gap: 25px;
		border-radius: 10px;
		box-shadow: 0px 0px 5px var(--black) inset;
		padding: 10px;
		hgroup {
			flex: 1 1 0;
			border-right: 1px solid var(--grey50);
		}
		p {
			flex: 2 1 0;
		}
	}
}

ul.discs {
    list-style: disc;
    list-style-position: outside;
    li {
        margin: 0px 0px 0px 50px;
        padding: 5px 0px 5px 0px;
    }
}


ol {
	list-style-position: inside
}

dl {
	padding: 15px;
	display: inline-block;
	outline: 1px solid var(--black);
    font-family: LibMono-Reg;
}

dt {
	font-family: LibMono-Bold;
}

dd {
	margin: 0px 0px 20px 20px;
	color: var(--grey60);
}

dd:last-child { margin: 0px 0px 0px 20px; }



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

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


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

main.form {
	padding: 100px;
}


form {
	margin: 20px;
	padding: 50px;
	border-radius: 10px;
	display: flex;
	flex-flow: column nowrap;
	gap: 25px;
	div.formq {
		display: flex;
		flex-flow: column nowrap;
		border-radius: 20px;
		padding: 25px;
		label { 
			margin: 0px 0px 10px 0px;
		}
		p.note { 
			padding: 4px;
		}
		input {
			padding: 10px;
		}
		select {
			
			padding: 10px;
		}

		fieldset {
			padding: 5px;
			font-family: LibMono-Reg;
			div {
				padding: 5px;
			}
			legend {
				padding: 5px 10px;
				
			}
			input {
				font-size: 16pt;
				outline: none;
			}
			label {
				font-size: 14pt;
				font-family: LibMono-Reg;
			}
			
		}
	}
	input[type="submit"] { 
		padding: 10px;
		font-size: 20pt;
		font-family: LibMono-Bold;
		border-radius: 5px;
		background: var(--sm-green);
	}
	input[type="submit"]:hover {
		background: var(--green100);
		color: var(--sm-green);
	}
}

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

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


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

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


/********************************************************************
BUTTONS
********************************************************************/
/* Default button if no classes are provided (same as .primary) */
button {
	border-radius: 10px;
	padding: 8px 24px;
}

/* Primary Buttons */
button.primary {
	border-radius: 10px;
	padding: 8px 24px;
}

/* Secondary Buttons */
button.secondary {
	border-radius: 10px;
	padding: 8px 24px;
}


/* Button Icon Placement */
button.iconOnly::after { content: ">"; }
button.iconLeft::before { content: "> "; }
button.iconRight::after { content: " >"; }



/* Default button if no classes are provided (same as .primary) */
button {
    background: var(--black);
    outline: none;
    border: none;
    color: var(--white);
    font-size: 20pt;
}

button:hover {
    background: var(--black75);
}



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

img {  }

img.icon-sm { 
    height: 25px;
    width: 25px;
}

img.icon-med { 
    height: 50px;
    width: 50px;
}

img.icon-lg { 
    height: 75px;
    width: 75px;
}

img.icon-xl { 
    height: 100px;
    width: 100px;
}

img.fadein {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: fade;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
}

img.floating {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

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