Reorganize CSS

assets/css/bobastyle.css

@@ -1,66 +1,35 @@
-body {
-  background-color: black;
-  font-family: sans-serif;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-}
-a {
-  color: #4da6ff;
-}
-blockquote {
-  border-left: 5px solid #222;
-  padding-left: 10px;
-}
-
+/* Layout */
 .header {
   padding: 10px;
-  text-align: center;
-  background: #1a406b;
-  color: lightgray;
 }
-.header h1 {
-  font-size: 40px;
+
+.page {
+  display: flex;
+}
+
+.side, .content, .footer {
+  padding: 20px;
 }
 
 #navbar {
   overflow: hidden;
-  background-color: #222;
 }
+
 #navbar a {
   float: left;
   display: block;
-  color: lightgray;
-  text-align: center;
   padding: 14px 20px;
-  text-decoration: none;
 }
-#navbar a:hover {
-  background-color: #444;
-  color: white;
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 * {
   box-sizing: border-box;
 }
-.page {
-  display: flex;
-}
-.side {
-  background-color: #111;
-  color: lightgray;
-  padding: 20px;
-}
-.content {
-  background-color: black;
-  color: lightgray;
-  padding: 20px;
-}
-.footer {
-  padding: 20px;
-  text-align: center;
-  background: #ddd;
-}
 
 @media screen and (max-width: 700px) {
   .page {
@@ -74,3 +43,52 @@ blockquote {
     width: 100%;
   }
 }
+
+
+
+
+/* Styling */
+.header {
+  text-align: center;
+  background: #1a406b;
+  color: lightgray;
+}
+.header h1 {
+  font-size: 40px;
+}
+
+#navbar {
+  background-color: #222;
+}
+#navbar a {
+  color: lightgray;
+  text-align: center;
+  text-decoration: none;
+}
+#navbar a:hover {
+  background-color: #444;
+  color: white;
+}
+.side {
+  background-color: #111;
+  color: lightgray;
+}
+.content {
+  color: lightgray;
+}
+.footer {
+  text-align: center;
+  background: #ddd;
+}
+
+body {
+  background-color: black;
+  font-family: sans-serif;
+}
+a {
+  color: #4da6ff;
+}
+blockquote {
+  border-left: 5px solid #222;
+  padding-left: 10px;
+}