Add simple media query for less than 800 pixel screens

css/elknernet.css

@@ -115,7 +115,7 @@ footer a:hover>strong {
 }
 p {
     text-align: justify;
-    font-size: 1.2em;
+    font-size: 1.2vw;
 }
 blockquote {
     margin-top: 40px;
@@ -130,7 +130,7 @@ blockquote p {
 }
 blockquote p:first-letter {
     float: left;
-    font-size: 2em;
+    font-size: 2vw;
     color: #960;
 }
 .author {
@@ -141,3 +141,28 @@ blockquote p:first-letter {
     margin-right: 50px;
     color: #630;
 }
+
+/* Style for mobile devices */
+@media (max-width: 800px) {
+    main, header {
+        display: block;
+    }
+    header>img, header>p, header>div#author {
+        display: none;
+    }
+    header>h1 {
+        font-size: 7vw;
+        margin-bottom: 0;
+    }
+    header>nav {
+        font-size: 3.4vw;
+        margin-top: 0;
+        margin-bottom: 2vw;
+    }
+    section>h2 {
+        font-size: 3.2vw;
+    }
+    section>ul>li {
+        font-size: 2.2vw;
+    }
+}