* { margin: 0; padding: 0; }
html {}
body, header, main, footer { display: flex; flex-flow: column nowrap; align-items: center; }

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

header {
	width: 100%;
	padding: 25px;
	background: var(--black);
	h1,h2,h3,h4,h5,h6,p { color: var(--white);}
}

main {
	padding: 50px;
}

footer {
	width: 100%;
	padding: 10px;
	background: var(--black);
	h1,h2,h3,h4,h5,h6,p { color: var(--white);}
}


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


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

h1, h2, h3, h4, h5, h6 { font-family: monospace; }
p, a, li, th, td, q, blockquote, cite { font-family: monospace; }

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

hgroup {}
h1 { font-size: 28pt; }
h2 { font-size: 22pt; }
h3 {}
h4 {}
h5 {}
h6 {}
p { font-size: 14pt; }
th, td { font-size: 14pt; }


/********************************************************************
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 { background: rgb(250 247 209 / 100%); }
th { padding: 15px; border: 1px solid black; background: grey; color: white; }
td { padding: 15px; border: 1px solid black; }
col {}
colgroup {}


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

form {}

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

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