/* Preset all margins and paddings to be zero to override browser defaults */
* { margin: 0; padding: 0; }

/* Force HTML and BODY tags to be full width */
html, body { width: 100%; }

/***********************************************************************/
/*                                                                     */
/*                  PRIMARY CONTAINER TAG LAYOUTS                      */
/*                                                                     */
/***********************************************************************/

nav {
	display: flex;
	flex-flow: row nowrap;
	padding: 10px;
	position: sticky;
	top: 0;
	z-index: 2;
	ul {
		display: flex;
		flex-flow: row nowrap;
		padding: 0px 10% 0px 10%;
		gap: 20px;
		li {
			a {
				padding: 20px 15px;
			}
		}
	}
}

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

footer {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 50px;
    padding: 50px;
    position: static;
    z-index: 2;
}


/***********************************************************************/
/*                                                                     */
/*                  	   CONTAINER TAG LAYOUTS                       */
/*                                                                     */
/***********************************************************************/

section {

}

div { 

}

article {

}

aside {

}

details {

    summary {

        padding: 10px;
    }
    p {
        padding: 10px;
    }
}

dialog {

}


/***********************************************************************/
/*                                                                     */
/*                      CUSTOM SECTION TEMPLATES                       */
/*                                                                     */
/***********************************************************************/

section.hero {
    height: 50vh;
    display: flex;
    flex-flow: column nowrap;
    margin: 0px 0px 25px 0px;
}

section.split-1-2 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 2 1 auto; }
}

section.split-2-1 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 2 1 auto; }
	div:last-child { flex: 1 1 auto; }
}

section.split-1-3 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 3 1 auto; }
}

section.split-3-1 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 3 1 auto; }
	div:last-child { flex: 1 1 auto; }
}

section.split-2-1-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-1-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:last-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-2-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

section.split-2-2-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:last-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

section.split-2-1-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 2 1 auto; }
	div:last-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-2-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

section.pad10 {
	padding: 10px;
}

section.pad20 {
	padding: 20px;
}

section.pad25 {
	padding: 25px;
}

section.pad50 {
	padding: 50px;
}

/***********************************************************************/
/*                                                                     */
/*                          CUSTOM FLEXBOXES                           */
/*                                                                     */
/***********************************************************************/

/* FLEX ROWS */
.flexrow-nowrap { display:flex; flex-flow:row nowrap; }
.flexrow-wrap { display:flex; flex-flow:row wrap; }

/* FLEX COLUMNS */
.flexcol-nowrap { display:flex; flex-flow:column nowrap; }
.flexcol-wrap { display:flex; flex-flow:column wrap; }

/* FLEX CHILD SIZES */
.flexchild-1 { flex: 1 1 auto }
.flexchild-2 { flex: 2 1 auto }
.flexchild-3 { flex: 3 1 auto }
.flexchild-4 { flex: 4 1 auto }

/* JUSTIFY-CONTENT OPTIONS */
.just-start { justify-content:flex-start; }
.just-mid { justify-content:center; }
.just-end { justify-content:flex-end; }
.just-left { justify-content:left; }
.just-right { justify-content:right; }
.just-around { justify-content:space-around; }
.just-between { justify-content:space-between; }
.just-even { justify-content:space-evenly; }
.just-stretch { justify-content:stretch; }

/* ALIGN-ITEMS OPTIONS */
.align-start { align-items:flex-start; }
.align-mid { align-items:center; }
.align-end { align-items:flex-end; }
.align-stretch { align-items:stretch; }
.align-anchor { align-items:anchor-center; }
.align-base { align-items:baseline; }
.align-base-first { align-items:firstbaseline; }
.align-base-last { align-items:lastbaseline; }

/* GAP OPTIONS */
.gap10 { gap:10px }
.gap20 { gap:20px }
.gap25 { gap:25px }
.gap40 { gap:40px }
.gap50 { gap:50px }


/***********************************************************************/
/*                                                                     */
/*                  	        UNIQUE TEXT                            */
/*                                                                     */
/***********************************************************************/
address {

}

time {

}

blockquote {
	margin: 15px;
	padding: 5px 5px 5px 25px;
}

q {

}

cite {
	font-size: 11pt;
	a {
		font-size: 11pt;
	}
}

cite::before { content: "[source: "; }
cite::after { content: "]"; }


pre {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
}

code {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
}

abbr {

}

dfn {

}


/***********************************************************************/
/*                                                                     */
/*                  	        ALTERING TEXT                          */
/*                                                                     */
/***********************************************************************/
span {

}

mark {

}


b {

}

em {

}

i {

}

u {

}

s {

}

strong {

}

sub {

}

sup {

}

ins {

}

del {

}

/***********************************************************************/
/*                                                                     */
/*                  	  OTHER SEMANTIC TAGS                          */
/*                                                                     */
/***********************************************************************/

search {

}

header {

}

/* Figures */
figure {

}

figcaption {

}

math {

}

var {

}

data {

}

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

ul, ol, dl { margin: 10px }

ul {
	list-style-position: inside;
}

ol {
	list-style-position: inside
}

li {
	padding: 10px;
}

dl {
	padding: 15px;
	display: inline-block;
}

dt {

}

dd {
	margin: 0px 0px 20px 20px;
}

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


/***********************************************************************/
/*                                                                     */
/*                                 FORMS                               */
/*                                                                     */
/***********************************************************************/

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);
	}
}



select {

}

option {

}

optgroup {

}

/* Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. */
datalist {

}

label {

}

/* Used to group several controls as well as labels (<label>) within a web form */
fieldset {

}

/* Represents a caption for the content of its parent <fieldset> */
legend {

}

button {

}

/* Displays an indicator showing the completion progress of a task, typically displayed as a progress bar */
progress {

}

textarea {

}

/* Represents either a scalar value within a known range or a fractional value */
meter {  }

/* Container element into which a site or app can inject the results of a calculation or the outcome of a user action */
output {  }

/*  Displays the content of the currently selected <option> inside a closed <select> element */
selectedcontent {  }



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

table {  }

/* Encapsulates a set of <tr> elements indicating they are a table's header, body, and footer data respectively */
thead {  }
tbody {  }
tfoot {  }

tr {  }
th {  }
td {  }

/* Table caption */
caption {  }

/* Defines one or more columns in a column group represented by its implicit or explicit parent <colgroup> element. 
The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined. */
col {  }
colgroup {  }


table.full-width { width:100%; }

table.short-narrow { th,td { padding:20px; } }
table.short-wide { th,td { padding:20px 50px; } }
table.tall-narrow { th,td { padding:50px 20px; } }
table.tall-wide { th,td { padding:50px; } }

th.short-narrrow { padding:50px 50px; }
th.short-wide { padding:10px 50px;  }
th.tall-narrow { padding:50px 10px; }
th.tall-wide { padding:50px 50px; }

td.short-narrrow { padding:10px 10px; }
td.short-wide { padding:10px 50px;  }
td.tall-narrow { padding:50px 10px; }
td.tall-wide { padding:50px 50px; }

table.align-center { th, td { text-align:center } }


/***********************************************************************/
/*                                                                     */
/*                               HEADINGS                              */
/*                                                                     */
/***********************************************************************/

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 }

/***********************************************************************/
/*                                                                     */
/*                               LINKS                                 */
/*                                                                     */
/***********************************************************************/

a {  }

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

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

a.btn-primary {  }

a.btn-secondary {  }

a.btn {  }



/***********************************************************************/
/*                                                                     */
/*                              SEPARATORS                             */
/*                                                                     */
/***********************************************************************/

hr {
	margin:50px 0px;
}

hr.null10 { border:none; margin:10px 0px }
hr.null25 { border:none; margin:25px 0px }
hr.null50 { border:none; margin:50px 0px }
hr.null100 { border:none; margin:100px 0px }




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

img { 
	margin: 10px; 
	width: 80%;
}


/* Defines an area inside an image map that has predefined clickable areas. An image map allows geometric 
areas on an image to be associated with hyperlink. */
area {  }

/* Used with <area> elements to define an image map (a clickable link area). */
map {  }

/* Used to embed sound content in documents. It may contain one or more audio sources, represented using the 
src attribute or the source element: the browser will choose the most suitable one. It can also be the destination 
for streamed media, using a MediaStream. */
audio {  }	

/* Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), 
for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.*/
track {  }	

/* Embeds a media player which supports video playback into the document. You can also use <video> for audio content, 
but the audio element may provide a more appropriate user experience. */
video {  }	

/* Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. */
svg {  }


/***********************************************************************/
/*                                                                     */
/*                          EMBEDDED CONTENT                           */
/*                                                                     */
/***********************************************************************/

/* Embeds external content at the specified point in the document. This content is provided by an external 
application or other source of interactive content such as a browser plug-in. */
embed {  }

/* Represents a nested browsing context, like <iframe> but with more native privacy features built in. */
fencedframe {  }

/* Represents a nested browsing context, embedding another HTML page into the current one. */
iframe {  }

/* Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. */
object {  }

/* Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. */
picture {  }

/* Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning 
that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in 
order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. */
source {  }







/***********************************************************************/
/*                                                                     */
/*                                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: " >"; }


/***********************************************************************/
/*                                                                     */
/*                            MISC TAGS                                */
/*                                                                     */
/***********************************************************************/

/* Represents a word break opportunity — a position within text where the browser may optionally 
break a line, though its line-breaking rules would not otherwise create a break at that location. */
wbr {  }

/* Used to enclose inline text which represents sample (or quoted) output from a computer program. 
Its contents are typically rendered using the browser's default monospaced font */
samp {  }

/* Represents small annotations that are rendered above, below, or next to base text, usually used 
for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common. */
ruby {  }

/* Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <ruby> element. One <rp> 
element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text. */
rp {  }

/* Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information 
for East Asian typography. The <rt> element must always be contained within a <ruby> element. */
rt {  }

/* Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, 
the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated */
kbd {  }

/* Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful 
when a website dynamically inserts some text and doesn't know the directionality of the text being inserted. */
bdi {  }

/* Overrides the current directionality of text, so that the text within is rendered in a different direction. */
bdo {  }



/***********************************************************************/
/*                                                                     */
/*                       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 */
.container {
	width: 80%;
	margin: auto;
}




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