<header id="top">
		<h1><a href="#">$siteTitle</a></h1>
		<nav id="mainMenu">
			<ul>
				<li><a href="#" class="current">Home</a></li>
				<li><a href="#contact">Contact Us</a></li>
				<li><a href="#login">Log In</a></li>
				<li><a href="#register">Register</a></li>
			</ul>
		</nav>
	<!-- #top --></header>
	
	<div class="content">
	
		<main>
			
			<section>
				<h2>First Section</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in ante eu lacus pharetra iaculis sit amet ac purus. Suspendisse a ipsum vel nibh condimentum semper. 
				</p>
			</section>
			
			<section>
				<h2>Second Content Section</h2>
				<p>
					Morbi eu ornare erat. Aenean sollicitudin et lectus sit amet consequat. Fusce congue sagittis viverra. In facilisis, orci sed tincidunt suscipit, orci felis efficitur urna, ac dapibus massa magna eget enim.
				</p>
			</section>
			
		</main>
			
		<div class="extras">
			
			<section class="links">
				<h2>Links Section</h2>
				<p>
					Text describing links
				</p>
				<ul>
					<li><a href="#">Sample Link</a></li>
					<li><a href="#">Sample Link</a></li>
					<li><a href="#">Sample Link</a></li>
				</ul>
			</section>
			
		<!-- .extras --></div>
		
		<div class="extras">
			
			<section class="links">
				<h2>Links Section</h2>
				<p>
					Text describing links
				</p>
				<ol>
					<li><a href="#">Sample Link</a></li>
					<li><a href="#">Sample Link</a></li>
					<li><a href="#">Sample Link</a></li>
				</ol>
			</section>
			
		<!-- .extras --></div>
		
	<!-- .content --></div>
		
	<footer id="bottom">
		<hr>
		Disclaimer Goes Here
	<!-- #bottom --></footer>

/* variables for easy user config */

html {

	/* colours */
	--textColor:#000;
	--bodyBgColor:#FFF;
	--chromeBGColor:#ACE;
	--sectionBgColor:#CDE;
	--sectionShadow:0 0.125rem 0.25em 0.125em #0005;
	--sectionBorderRadius:0.5rem;
	

	/* dynamic paddings */
	--gap:min(1.5rem, 2vw);
}

/* reset to give steady baseline */

html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

*, *:after, *:before {
	box-sizing:border-box;
	flex:1 0 auto;
}

hr {
	display:none;
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font:normal 16px/1.5 sans-serif;
}

button {
	cursor:pointer;
}

/* end reset */

body {
	display:flex;
	flex-direction:column;
	align-items:center;
	color:var(--textColor);
	background:var(--bodyBgColor);
}

#top,
#bottom {
	width:100%;
	flex-grow:0;
	padding:1.5rem;
	background:var(--chromeBGColor);
	box-shadow:var(--sectionShadow);
}

#top {
	display:flex;
	flex-wrap:wrap;
}

#mainMenu {
	flex-grow:0;
	list-style:none;
	margin-top:1em;
}

#mainMenu li {
	display:inline;
	padding-left:1em;
}

.content {
	display:flex;
	flex-wrap:wrap;
	max-width:80em;
	gap:0 var(--gap);
	padding:var(--gap) var(--gap) 0;
	margin:auto;
}

main {
	width:50%;
	min-width:min(36em, 100%);
}

.extras {
	min-width:min(12em, 100%);
}

section {
	padding:var(--gap) var(--gap) 0;
	margin:0 0 var(--gap);
	background:var(--sectionBgColor);
	border-radius:var(--sectionBorderRadius);
	box-shadow:var(--sectionShadow);
}

section p {
	padding-bottom:var(--gap);
}

section ol,
section ul {
	padding:0 0 var(--gap) 2rem;
}