html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}


pre {
	font-family: monospace;
}

b {
  font-weight: bold;
}

p {
	font-family: system-ui;
	margin-bottom: 1em;
	font-size: 0.875em;
}

h1 {
	font-size: 2.5em;
	font-family: system-ui;
}

h2 {
	font-size: 1.875em;
	font-family: system-ui;
}

#nw-nav-menu {
}

ul {
	padding: inherit;
}

li {
	padding: 0px;
	list-style-type: inherit;
}

html,body {
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}

footer {
    text-align: center;
    background-color: ghostwhite;
    color: black;
    border-right: 3px solid gainsboro;
    border-left: 3px solid gainsboro;
    border-top: 3px solid gainsboro;
    margin-top: auto;
}

#nw-menu li {
	list-style-type: none;
	padding: 0;
}

#nw-wrapper {
	display: flex;
	flex-flow: row wrap;
	height: 100%;
}

@media screen and (min-width: 1px) {
	img.logo {
		display: none;
	}

	#nw-menu {
		display: none;
	}

	#nw-main-content
	{
		width: 100%;
		padding: 10px;
		flex-direction: column;
	}
}

@media screen and (min-width: 800px) {
	img.logo {
		display: flex;
		object-fit: contain;
		width: 100%;
	}

	#nw-menu {
		display: block;
		width: 9.6em;
		overflow-y: visible;
		bottom: 0;
		overflow-y: visible;
		border-right: 3px solid gainsboro;
		border-top: 3px solid gainsboro;
		padding: 15px;
		background: ghostwhite;
		min-height: 100vh;
	}

	#nw-main-content
	{
		width: 70%;
		padding: 10px;
		flex: auto;
		flex-direction: column;
	}
}