Added a lot of content

res/css/main.css

@@ -8,11 +8,18 @@
 * {
     margin: 0;
     padding: 0;
-    font-family: 'LeagueGothic', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     color: var(--main-font-color);
     letter-spacing: 1px;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'LeagueGothic', sans-serif;
+}
+
+h1 {
+    font-size: 3em;
+}
+
 @font-face {
     font-family: 'LeagueGothic';
     src: url('../fonts/LeagueGothic.ttf');
@@ -22,8 +29,83 @@ body {
     background-color: var(--main-bg-color);
 }
 
-#header-img {
+#main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100vw;
+    height: 10vh;
+    padding: 20px;
+    background-color: var(--main-bg-color);
+    box-sizing: border-box;
+    font-family: 'LeagueGothic', sans-serif;
+    font-size: 1.5em;
+}
+
+#nav-logo {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+#nav-logo img {
+    max-height: 100%;
+    width: auto;
+}
+
+#main-nav ul {
+    display: flex;
+    list-style: none;
+}
+
+#main-nav ul li {
+    margin-left: 10px;
+    width: 100px;
+    height: 30px;
+    background-color: transparent;
+    text-align: center;
+    border-radius: 5px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+#main-nav ul li a {
+    text-decoration: none;
+    color: var(--main-font-color);
+}
+
+#main-nav ul li:hover {
+    background-color: var(--main-accent-color);
+    transition: background-color 0.3s ease-in-out;
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    margin-left: 20vw;
+    margin-right: 20vw;
+    width: 60vw;
+}
+
+.header-left {
+    width: 50%;
+}
+
+.header-left p {
+    flex-wrap: wrap;
+}
+
+.header-right {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-end;
+}
+
+#header-img {
+    width: 100%;
     height: 25vh;
     display: flex;
     justify-content: center; 
@@ -39,4 +121,124 @@ body {
 
 #content {
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    box-sizing: border-box;
+
+}
+
+.content-full-width {
+    width: 80%;
+    flex-grow: 1;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.content-full-width h2 {
+    font-size: 1.8em;
+}
+
+.content-full-width > * {
+    width: 50%;
+    text-align: left;
+    align-self: center;
+    margin-top: 30px;
+}
+
+.content-full-width-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+    background-color: var(--main-bg-color);
+    color: var(--main-font-color);
+    font-family: 'LeagueGothic', sans-serif;
+    font-size: 1em;
+}
+
+#hamburger-icon {
+    display: none;
+    font-size: 2em;
+    cursor: pointer;
+}
+
+/* MOBILE STYLES */
+@media (max-width: 768px) {
+    #hamburger-icon {
+        display: block;
+    }
+
+    #nav-menu {
+        display: none !important;
+        flex-direction: column;
+        width: 100%;
+        background-color: black;
+    }
+
+    #nav-menu.show {
+        display: flex !important;
+    }
+
+    #main-nav {
+        flex-direction: column;
+        height: auto;
+    }
+
+    #main-nav ul {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    #main-nav ul li {
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    #nav-logo {
+        display: none;
+    }
+
+    header {
+        flex-direction: column;
+        margin-left: 5vw;
+        margin-right: 5vw;
+        width: 90vw;
+    }
+
+    .header-left, .header-right {
+        width: 100%;
+        text-align: center;
+    }
+
+    #header-img {
+        height: auto;
+        padding-top: 2vh;
+        padding-bottom: 2vh;
+    }
+
+    #content {
+        width: 100vw;
+    }
+
+    .content-full-width {
+        width: 90%;
+    }
+
+    .content-full-width > * {
+        width: 90%;
+    }
+
+    footer {
+        flex-direction: column;
+        text-align: center;
+    }
 }