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

html, body { width: 100%; }

body {
	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");
}

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

header {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 20px 10% 20px 10%;
	height: 50vh;
	box-shadow: 0px 0px 15px var(--grey50);
	color: var(--white);
    box-shadow: none;
}

main {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 20px;
	position: static;
	z-index: 0;
	p { padding: 10px 0px 10px 0px; }
}

footer {
	display: flex;
	flex-flow: column nowrap;
    padding: 10px 10% 20px 10%;
    margin: 25px 0px 0px 0px;
    position: static;
    z-index: 2;
    background: var(--black);
    color: var(--white);
    hr { border-top: 1px solid var(--white); }
}


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

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

nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10% 10px 10%;
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--yellow);
    a {
    	font-family: LibMono-Bold;
    	color: var(--black);
    	text-decoration: none;
    }
    div.menus {
    	display: flex;
    	flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 25px;
        ul.menu-primary {
		    li {
		        a { color: var(--black); }
		        svg { height: 30px; fill: var(--black); }
		    }
		    li:hover {
		        a { color: var(--white); background: var(--black); }
		        svg { height: 30px; fill: var(--white); }
		    }
		    svg { fill: var(--black); }
		    svg:hover { fill: var(--white); }
        }
        ul.menu-secondary {
        	li {
        		a { color: var(--black); }
		        svg { height: 30px; fill: var(--black); }
        	}
        	li:hover {
		        a { color: var(--white); }
		        svg { height: 30px; fill: var(--white); }
		    }
        }
        svg { fill: var(--black); }
        svg:hover { fill: var(--white); }
    }
}


/* Small Screens */
@media only screen and (max-width: 699px) {
	nav {
		div.menus {
			ul.menu-primary { 
				display: none;
				flex-flow: column nowrap;
				li { padding: 4px 8px; a { padding: 4px 8px; } }
			}
			ul.menu-secondary { 
				display: none;
			}
			svg.menu-burger { display: initial; height: 25px; width: 25px; }
			svg.menu-mobile-close { display: none; height: 25px; width: 25px; position: absolute; top: 10px; right: 10px;}
		}
	}
}

/* Large Screens */
@media only screen and (min-width: 700px){
	nav {
		ul.menu-primary {
			display: flex;
			flex-flow: row nowrap;
			gap: 20px;
			li {
				a {
					padding: 10px 16px;
				}
			}
		}
		ul.menu-secondary {
			display: flex;
			flex-flow: row nowrap;
			gap: 20px;
		}
		svg.menu-burger { display: none; }
		svg.menu-mobile-close { display: none; }
	}
}




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

article {}

aside {}

details {
	outline: 1px solid var(--primary);
    summary {
        padding: 10px;
        background: var(--primary);
        color: var(--white);
    }
    p {
        padding: 10px;
    }
}

section { 
	margin: 25px 10% 25px 10%;
	padding: 25px;
	color: var(--black);
	border-radius: 25px;
}

section.about {
	background: rgba(255 255 255 / 60%);
	div {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		h2 { font-family: LibMono-Bold; }
		ul {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			li {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: 20px;
				padding: 5px 15px; 
				border-radius: 15px;
				background: var(--white50);
				box-shadow: 0px 0px 10px var(--grey50);
				color: var(--black);
				p { 
					padding: 0;
					font-family: LibMono-Reg;
					font-size: 14pt;
				}
				img { height: 50px; width: 50px; }
			}
		}
		@media only screen and (max-width: 799px) {
			ul { gap: 10px; }
		}
		
		@media only screen and (min-width: 800px) {
			ul { gap: 25px; }
		}
	}
}

section.legacy-socials {
	display: flex;
	flex-flow: column nowrap;
	background: var(--black);
	color: var(--white);
	p.subtitle { padding: 0px 0px 50px 0px; }
	div.social-grid {
		display: flex;
		flex-flow: row wrap;
		gap: 50px;
		a {
			display: flex;
			flex-flow: column nowrap;
			flex: 1 1 0;
			gap: 15px;
			font-family: LibMono-Bold, monospace;
			background: var(--white90);
			color: var(--black);
			border-radius: 5px;
   			text-decoration: none;
			padding: 20px 20px;
			div {
				display: flex;
				flex-flow: row nowrap;
				gap: 20px;
				align-items: center;
			}
			p,li { font-family: inherit; }
   			p.garamond { font-family: Garamond-Reg; }
		}
		a:hover {
			opacity: 70%;
			p { color: var(--black); }
		}
	}
}

section.fed-socials {
	background: rgba(5, 5, 5, 0.6);
	outline: 1px solid var(--white);
	color: var(--white);
	a {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 25px;
		padding: 10px;
		background: var(--white);
		color: var(--black);
		font-family: LibMono-Bold, monospace;
   		text-decoration: none;
		outline: 1px solid var(--white);
		border-radius: 5px;
		p,li { font-family: inherit; color: var(--black); padding: 0;}
    	p.garamond { font-family: Garamond-Reg; }
	}
	a:hover {
		opacity: 70%;
		p { color: var(--black); }
	}
}

/* Small Screens */
@media only screen and (max-width: 799px) {
	section.fed-socials {
		display: flex;
		flex-flow: column nowrap;
		gap: 10px;
		div.fed-buttons {
			display: flex;
			flex-flow: column nowrap;
			gap: 20px;
		}
	}
}
		
/* Large Screens */
@media only screen and (min-width: 800px) {
	section.fed-socials {
		display: flex; 
		flex-flow: row nowrap; 
		justify-content: space-evenly;
		div.fed-desc {
			flex: 1 1 0;
		}
		div.fed-buttons {
			flex: 2 1 0;
			display: flex;
			flex-flow: column nowrap;
			padding: 50px;
			gap: 20px;
		}
	}		
}


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

dialog {}


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

div {}
span {}


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

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

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    h1 { font-size: 36pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4,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: 16pt; }
    h4,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: 56pt; }
    h2 { font-size: 32pt; }
    h3 { font-size: 24pt; }
    h4,h5,h6 { font-size: 18pt; }
    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; }
}

.center { text-align: center }

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

h1,h2 { padding: 15px 0px 20px 0px; }

h3,h4,h5,h6 { padding: 10px 0px 10px 0px; }

p { padding: 0px 0px 5px 0px }

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

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

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

a {  }

a.btn-cta {
    padding: 12px 24px;
    border-radius: 10px;
}

a[class^="btn-"] {
    display: inline-block;
}

a.btn-icon {
	padding: 12px 20px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 25px;
    h2,h3,h4,h5,h6,p { padding: 0; }
}

a.btn-primary {  }

a.btn-secondary {  }

a.btn-small { padding: 4px 8px; }

a.btn-medium { padding: 8px 12px; }

a.btn-large { padding: 12px 20px; }

a.btn-xlarge { padding: 20px 30px; }










/* Mobile Screens */
@media only screen and (max-width: 768px) { a { font-size: 14pt } }

/* Tablet Screens */
@media only screen and (min-width: 768px) { a { font-size: 14pt } }

/* Desktop Screens */
@media only screen and (min-width: 992px) { a { font-size: 16pt } }

main {
    a {
        color: var(--link-default);
        text-decoration: underline;
        font-weight: 900;
    }

    a:hover {
        color: var(--link-hover);
        text-decoration: none;
    }

    a:active {
        color: var(--link-active);
        text-decoration: underline;
    }

    a:visited {
        color: var(--link-visited);
        text-decoration: underline;
    }
}


/* LINKS AS BUTTONS */

a[class^="btn-"] {
    font-family: LibMono-Bold, monospace;
    text-decoration: none;
    p,li { font-family: inherit; }
    p.garamond {
        font-family: Garamond-Reg;
    }
}

a.btn-primary, a.btn-primary:active, a.btn-primary:visited {
    background: var(--primary);
    color: var(--white);
    outline: 1px solid var(--primary);
}

a.btn-primary:hover {
    background: var(--white);
    color: var(--black);
}


a.btn-black, a.btn-black:active, a.btn-black:visited {
    background: var(--black);
    color: var(--white);
    outline: 1px solid var(--black);
}

a.btn-black:hover {
    background: var(--white);
    color: var(--black);
}

a.btn-white, a.btn-white:active, a.btn-white:visited {
    background: var(--white);
    color: var(--black);
    outline: 1px solid var(--white);
}

a.btn-white:hover {
    background: var(--black);
    color: var(--white);
}

a.btn-round {
    border-radius: 5px;
}

a.btn-circle {
    border-radius: 20px;
}

/********************************************************************
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 {
	list-style: none;
}



ul.images {
	li {
		img {
			max-height: 350px;
			padding: 20px;
			aspect-ratio: 1 / 1;
		}
	}
}

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(--blue-main);
    outline: none;
    border: none;
    color: var(--white);
    font-size: 20pt;
}

button:hover {
    background: var(--blue-med);
}

/* Primary Buttons - background filled in */
button.primary {
    background: var(--btn-primary);
    outline: none;
    border: none;
    color: var(--white);
}

button.primary:hover { background: var(--btn-primary-hover); }
button.primary:active { background: var(--btn-primary-active); }
button.primary:disabled { background: var(--btn-primary-disabled); }

/* Secondary Buttons - no bg, with outline */
button.secondary {
    background: none;
    outline: 2px solid var(--blue-main);
    border: none;
    color: var(--blue-main);
}

button.secondary:hover { outline: 2px solid var(--btn-primary-hover); color: var(--btn-primary-hover);}
button.secondary:active { outline: 2px solid  var(--btn-primary-active); color: var(--btn-primary-active);}
button.secondary:disabled { outline: 2px solid var(--btn-primary-disabled); color: var(--btn-primary-disabled);}




button.fill { background: var(--primary); color: var(--white); }
button.fill:hover { background: var(--white); color: var(--primary); }

button.outline { outline: 2px solid var(--primary); color: var(--primary); background: var(--white);}
button.outline:hover { outline: none; color: var(--white); background: var(--primary); }

button.squared { border-radius: 0px }
button.rounded { border-radius: 10px }
button.circular { border-radius: 25px }


/* Button Font Sizes */
button.size24 { font-size:24pt }
button.size16 { font-size:16pt }


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

/***********************************************************************/
/*                                                                     */
/*                       CUSTOM IMAGE GALLERIES                        */
/*                                                                     */
/***********************************************************************/

div.gallery-grid { 
	display: flex;
	flex-flow: row wrap;
	gap: 50px;
	img {
	 	object-fit: cover;
	 	height: 200px;
	 	width: 200px;
	}
}


div.gallery-free {
	display: flex;
	flex-flow: row wrap;
	gap: 50px;
	img {
	 	object-fit: contain;
	 	height: 300px;
	 	float: left;
	 	flex: 1 0 0;
	}
}

/***********************************************************************/
/*                                                                     */
/*                         CUSTOM LAYOUT ELEMENTS                      */
/*                                                                     */
/***********************************************************************/



/* Primary container to restrict content width */
div.card {
	flex: 1 1 200px;
	background: var(--grey10);
	border: none;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
}

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

span.note {
    font-size: 14pt;
    font-family: Garamond-Italic;
}

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

div.swatch {
    min-height:75px; min-width:75px;
    max-height:250px; max-width:250px;
    margin: 10px;
    aspect-ratio: 1/1;
    border-radius:50%;
}