CSS changes

- Removed unneeded CSS
- Moved media queries to the bottom of the stylesheet
 - Added a media query for smaller devices
- Added a font-size to the html tag
 - Switched em to rem sizes

main.css

@@ -1,42 +1,36 @@
-@media (prefers-color-scheme: dark){
+html{
-	body {color:#fff;background:#000;}
+	font-size: 16px;
-	a:link {color:#9cf;}
-	a:hover, a:visited:hover {color:#cef;}
-	a:visited {color:#9ce;}
-}
-@media print{
-	body{
-		max-width:none
-	}
 }
-
 body{
-	margin:0.2em auto;
+	margin:0.2rem auto;
-	max-width:40em;
+	max-width:48rem;
-	padding:0 .62em;
+	padding:0 .62rem;
-	font:1.2em/1.62 sans-serif;
+	font:1.2rem/1.62 sans-serif;
 }
 h1,h2,h3 {
 	line-height:1.2;
 }
-header{
-	line-height: 1.2em;
-}
 header h1{
-	margin-bottom: 0;
+	margin: 0.4rem 0;
+	margin-top: 1.4rem;
 }
 
 a{
 	text-decoration: none;
 }
-
+nav{
-nav p{
+	list-style-type: none;
-	display: inline-block;
+	padding: 0.2rem 0;
-	padding: 0;
-	margin: 0.4em 0;
-	margin-right: 0.6em;
 }
-nav a{
+nav>a{
+    padding: 0.5rem;
+	padding-left: 0;
+    margin-left: 2rem;
+}
+nav>a:first-child{
+    padding: 0.5rem;
+	padding-left: 0;
+	margin-left: 0;
 }
 nav hr{
 	margin: 0;
@@ -45,20 +39,7 @@ nav hr{
 html, body {
 	height: 100%;
 }
-body {
+
-	display: -webkit-box;
-	display: -webkit-flex;
-	display: -ms-flexbox;
-	display: flex;
-	flex-direction: column;
-	background-image: url(images/logo.png);
-	background-repeat: no-repeat;
-	background-position: center center;
-	background-size: 10em;
-}
-main{
-	flex: 1 0 auto;
-}
 ul{
 	padding-left: 0;
 	list-style-position: inside;
@@ -67,22 +48,45 @@ ul{
 }
 ul p{
 	display: inline-block;
-	margin: 0.5em 0;
+	margin: 0.5rem 0;
-}
-footer {
-	flex-shrink: 0;
 }
 footer p{
 	margin: 0;
 }
 
-.item{
+/* 
-	display: inline-block;
+ * Flex is only there to put the footer at the bottom.
-	width: 47%;
+ * Not actually needed. BLOAT!!
-	/*
+*/
-	background: red;
+body {
-	border: 1px solid black;
+	display: -webkit-flex;
-	*/
+	display: -ms-flexbox;
-	vertical-align: top;
+	display: flex;
-	margin: 1%;
+	flex-direction: column;
+}
+main{
+	flex: 1 0 auto;
+}
+
+@media (prefers-color-scheme: dark){
+	body {color:#fff;background:#000;}
+	a:link {color:#9cf;}
+	a:hover, a:visited:hover {color:#cef;}
+	a:visited {color:#9ce;}
+}
+
+@media print{
+	body{
+		max-width:none
+	}
+}
+
+@media screen and (max-width: 600px){
+	h1, h2, h3, p, nav{
+		text-align: center;
+	}
+
+	body{
+		margin: 0.2rem;
+	}
 }