* { margin: 0; padding: 0; }
html {}
body { 
	display: flex; flex-flow: column nowrap;
	font-family: monospace;
}


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

header { 
	align-self: stretch; 
	display: flex; justify-content: center;
	padding: 25px;
	background: var(--black); color: var(--white);
}

main { 
	align-self: center;
	display: flex; flex-flow: column nowrap;
	padding: 50px;
	max-width: 1200px;
}

footer { align-self: stretch; }


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

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

nav {}


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

article {}
aside {}
details {}
summary {}
section {}


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

dialog {}


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

div {}
span.b { font-weight: 900; }
span.important { font-weight: 900; color: var(--red); }


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

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

hgroup {}
h1 { font-size: 28pt; }
h2 { font-size: 24pt; }
h3 { font-size: 20pt; }
h4 { font-size: 16pt; }
h5 { font-size: 14pt; }
h6 { font-size: 14pt; }
p { font-size: 14pt; padding: 4px 0px 8px 0px; }

/********************************************************************
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 {
	border-collapse: collapse;
	border: 1px solid black;
}
caption {}
thead {}
tbody {}
tfoot {}
tr {}
tr:hover { outline: 2px solid var(--blue); }
th, td {
	padding: 10px;
	border: 1px solid black;
}
th {
	background: grey; color: white;
}
td {}
col {}
colgroup {}


/* Responsive table sizing */

th, td { font-size: 14pt; }


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

form {
	display: flex; flex-flow: column nowrap; gap: 25px;
	border: 1px solid black;
	padding: 25px;
	div.question {
		display: flex; flex-flow: column nowrap; align-items: stretch; gap: 5px;
		padding: 16px;
		border-radius: 6px;
		background: var(--grey10);
		p { color: var(--grey70); font-size: 11pt; }
		table.radio-grid {
			margin: 20px;
			border: 4px solid var(--white); border-radius: 6px;
			tr { 
				border-bottom: 1px solid var(--grey50); 
				th:nth-of-type(even) { background: var(--white); }
				td:first-child { text-align: left; }
				td:nth-of-type(even) { background: var(--white); }
			}
			th,td { border: none; text-align: center; }
			th { background: none; color: var(--black); font-size: 12pt; min-width: 80px; }
			input[type="radio"] { transform: scale(1.5); }
		}
	}
	div.info {
		padding: 24px;
	}
	input[type="submit"] { padding: 16px; background: var(--grey80); color: var(--white); border: none; border-radius: 6px; }
	input[type="submit"]:hover { background: var(--grey40); color: var(--black); }
}

/* Responsive form sizing */
label { font-size: 14pt; }

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


input, select {
	padding: 4px;
	border-radius: 4px;
	font-family: monospace;
}
input {
	border: 1px solid white;
	font-size: 18pt;
}
select {
	align-self: flex-start;
	border: 1px solid var(--grey40);
	background: var(--white);
	font-size: 14pt;
	color: var(--grey70);
}
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 {}