:root {
			    /* Background and text color */
			    --background:#c7e9e9;
			    --color:#0c1c02;

			    /* "Table" borders */
			    --borderstyle: 1px solid var(--bordercolor);
			    --bordercolor:#e4ddd2;

			    /* Container */
			    --container:#003c38;

			    /* Header */
			    --header:#f892c5;
			    --headercolor:#55067d;
			    --headerhover:#f36331;

			    /* Sidebar */
			    --sidebar:#ffc20e;
			    --sidebarlink:#6c251e;
			    --sidebarlinkhover:#b3169a;

			    /* Main content */
			    --main:#fafcf9;
			    --link:#
			    
			    
			  ;
			    --linkhover:#f892c5;
			    --linkvisited:#003c38;
			    
		

			    /* Footer */
			    --footer:#f892c5;
			    --footercolor:#05104c;
			    --footerlink:#55067d;
			    --footerlinkhover:#f36331;
			}

			* { margin:0; padding:0; }

			img {
			    max-width:95%;
			}

			body {
				background: var(--background);
				color:var(--color);
			    font:1.10rem "Times New Roman", serif;
			    line-height:1.4;
			    cursor: crosshair;
			}

			/* Skip to content link - do not remove */

			#skip a {
			    position:absolute;
			    display:inline-block;
			    left:0px;
			    top:-1000px;
			    overflow:hidden;
			    transition:top 0.5s ease;
			    background:var(--main);
			    color:var(--link);
			    z-index:1000;
			    padding:5px;
			}

			#skip a:focus {
			    top: 0;
			    transition:top 0.5s ease;
			}

			/* Container */

			#container {
				max-width:800px;
			    width: 90%;
				background:var(--container);
				border:var(--borderstyle);
				margin:20px auto;
			    display:flex;
			    flex-wrap:wrap;
			}

			/* Header */

			header {
			    flex: 1 1 calc(100% - 6px);
			    border: var(--borderstyle);
			    text-align:center;
			    margin:3px;
			    background:var(--header);
			    font-size:2.5em;
			}

			header a, header a:visited {
			    color:var(--headercolor);
			    text-decoration: none;
			    font: "Freckle Face";
			}

			header a:hover, header a:focus {
			    color:var(--headerhover);
			}

			/* Footer */

			footer {
			    flex: 1 1 calc(100% - 26px);
			    border: var(--borderstyle);
			    padding:5px;
			    margin:3px;
			    text-align:center;
			    color:var(--footercolor);
			    background:var(--footer);
			}

			footer a, footer a:visited {
			    color:var(--footerlink);
			    text-decoration: none;
			}

			footer a:hover, footer a:focus {
			    color:var(--footerlinkhover);
			}

			/* Sidebar/menu */

			#menu {
				padding:10px;
			    border: var(--borderstyle);
			    flex: 1 1 calc(20% - 23px);
			    background:var(--sidebar);
			    margin:0 0 0 3px;
			}

			#menu ul {
			    list-style:none;
			    font-size:1.8rem;
			    line-height:1.2;
			}

			#menu li {
			    display:block;
			    margin:.2em;
			}

			#menu li a, #menu li a:visited {
			    color:var(--sidebarlink);
			    text-decoration: none;
			}

			#menu li a:hover, #menu li a:focus {
			    color:var(--sidebarlinkhover);
			}

			/* Content */

			main {
				padding:10px;
			    flex: 1 1 calc(80% - 40px);
			    border: var(--borderstyle);
			    margin: 0 3px;
			    text-align:center;
			    background: var(--main);
			    
			}

			main a {
				color: #003c38;
				text-decoration: underline color #003c38;
				background-color: #ffc20e;
				font-family: "Helvetica";
				text-transform: lowercase;
				
			}

			main a:visited {
			    color:var(--linkvisited);
			}

			main a:hover, main a:focus {
			    color:var(--linkhover);
			}

			main h1 {
			    font-size:2em;
			}

			main h2 {
			    font-size:1.7em;
			}

			main h3 {
			    font-size:1.3em;
			}

			main h4 {
			    font-size:1.1em;
			}

			main ul {
			    margin-left:30px;
			}
			
			
			/* aligns text in a list to the left */
			#leftlist {
				text-align: left; 	
			}

			main ul li {
			    margin-bottom:.2em;
			}

			p {
				margin:0.5em 0px 0.5em 0px;
			}

			main input, textarea, select, button {
			    background: var(--main);
			    color: var(--color);
			    border:1px solid;
			    font:1em monospace;
			    padding:5px;
			}

			main input[type="submit"]:hover, main input[type="submit"]:focus, main button:hover, main button:focus {
			    color: var(--linkhover);
			}

			/* Mobile styling */

			@media screen and (max-width:800px) {
			    #menu {
			        flex: 1 1 calc(100% - 20px);
			        text-align:center;
			        margin: 0 3px 3px 3px;
			    }

			    #menu li {
			        display:inline-block;
			    }

			    #content {
			        flex: 1 1 calc(100% - 20px);
			    }
			}