diff --git a/base.css b/base.css
index 44a7e5a..ac2b420 100644
--- a/base.css
+++ b/base.css
@@ -1,3 +1,7 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 *{
     margin: 0;
     padding: 0;
@@ -27,6 +31,7 @@ main{
     position: fixed;
     top: 0;
     width: 100%;
+    z-index: 100;
 }
 .home-button, .sort-button{
     display: inline-block;
@@ -65,7 +70,7 @@ main{
 .so-pane > label{
     background-color: transparent;
 }
-.nav-menu, .sort-menu, .data-hold{
+.nav-menu, .sort-menu{
 	display: none;
 }
 .menu a{
@@ -98,21 +103,21 @@ main{
 .hmb-line::after{
     top: -5px;
 }
-.nav-menu:checked ~ nav{
+.nav-menu:checked ~ nav, .nav-open{
     max-height: 100%;
 }
-.nav-menu:checked ~ .hmb .hmb-line{
+.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
     background: transparent;
 }
-.nav-menu:checked ~ .hmb .hmb-line::before{
+.nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{
     transform: rotate(-45deg);
     top:0;
 }
-.nav-menu:checked ~ .hmb .hmb-line::after{
+.nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{
     transform: rotate(45deg);
     top:0;
 }
-.sort-menu:checked ~ .so-pane{
+.sort-menu:checked ~ .so-pane, .so-pane-open{
     display: block;
     box-sizing: content-box;
     position: fixed;
@@ -125,7 +130,17 @@ main{
     border-style: solid;
     border-width: 2px;
 }
-.main-box{
+.main-box > div, footer > p{
+    margin: 3px 0;
+    padding: 2px;
+    box-sizing: content-box;
+}
+.item-table{
+    display: table;
+    box-sizing: content-box;
+    background-color: transparent;
+}
+.flex-col{
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -142,17 +157,6 @@ main{
     align-content: center;
     width: 100%;
 }
-.main-box > div, footer > p{
-    margin: 3px 0;
-    padding: 2px;
-    box-sizing: content-box;
-}
-.item-table{
-    display: table;
-    width: 100%;
-    box-sizing: content-box;
-    background-color: transparent;
-}
 .item-table > div{
     display: table-row;
     background-color: transparent;
@@ -177,9 +181,13 @@ main{
     width: 100%;
 }
 .item-table-360{
-    display: none;
+    display: table-cell;
+    vertical-align: middle;
+    width: 360px;
+    overflow: hidden;
+    text-align: center;
 }
-.image-box{
+.flex-row{
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -205,21 +213,17 @@ main{
 }
 @media (min-width: 560px){
     .main-box > div, footer > p{
-        margin: 5px;
+        margin: 10px;
     }
-    .item-table-360{
-        display: table-cell;
-        vertical-align: middle;
-        width: 360px;
-        overflow: hidden;
+    .item-table-full{
+        width: -webkit-calc(100% - 360px);
+        width: -moz-calc(100% - 360px);
+        width: calc(100% - 360px);
     }
 	.image-box > a{
         border-width: 4px;
 	    margin: 10px;
     }
-    .small-only-row{
-        display: none !important;
-    }
 }
 @media (min-width: 640px){
     .nav{
diff --git a/dark.css b/dark.css
index 181b20b..4a4e430 100644
--- a/dark.css
+++ b/dark.css
@@ -1,3 +1,7 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 body{
 	color: #f9f9f9;
 	background-color: #050506;
@@ -12,7 +16,7 @@ a{
 .home-button > div, .sort-button > div, .menu a, .so-pane > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > input, .so-pane > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
diff --git a/index.go.html b/index.go.html
index ab8ef3f..50e7cdc 100644
--- a/index.go.html
+++ b/index.go.html
@@ -7,9 +7,9 @@
     <title>City University Portfolio</title>
     <link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
     {{ if .Light }}
-    <link rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
+    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
     {{ else }}
-    <link rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
+    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
     {{ end }}
     <script src="{{ .Data.JScriptURL }}"></script>
 </head>
@@ -85,10 +85,10 @@
         </ul>
     </nav>
 </header>
-<main class="main-box">
+<main class="main-box flex-col">
     <div>
-        <div class="item-table">
-            <div>
+        <div class="item-table flex-col">
+            <div class="flex-row">
                 <div class="item-table-full">
                     <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
                 </div>
@@ -96,12 +96,7 @@
                     <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
                 </div>
             </div>
-            <div class="small-only-row">
-                <div class="item-table-full">
-                    <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
-                </div>
-            </div>
-            <div>
+            <div class="flex-row">
                 <div class="item-table-full">
                     <div class="content">{{ .Data.About.GetContent }}</div>
                 </div>
@@ -109,17 +104,12 @@
                     <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
                 </div>
             </div>
-            <div class="small-only-row">
-                <div class="item-table-full">
-                    <div class="centered"><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
-                </div>
-            </div>
         </div>
     </div>
     {{ range .GetEntries }}
     <div>
         <div class="item-table">
-            <div>
+            <div class="flex-row">
                 <div class="item-table-full">
                     <div class="centered"><h1>{{ .Name }}</h1></div>
                 </div>
@@ -131,16 +121,7 @@
                     {{ end }}
                 </div>
             </div>
-            <div class="small-only-row">
-                <div class="item-table-full">
-                    {{ if eq .GetStartDate .GetEndDate }}
-                    <div class="centered"><h4>{{ .GetStartDate }}</h4></div>
-                    {{ else }}
-                    <div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
-                    {{ end }}
-                </div>
-            </div>
-            <div>
+            <div class="flex-row">
                 <div class="item-table-full">
                     <div class="content">{{ .GetContent }}</div>
                 </div>
@@ -157,23 +138,9 @@
                     </div>
                 </div>
             </div>
-            <div class="small-only-row">
-                <div class="item-table-full">
-                    <div class="centered">
-                        {{ if eq .VideoLocation "" }}
-                        <img src="{{ $.Data.NoVideoImageLocation }}" alt="No Video" width="360px">
-                        {{ else }}
-                        <video controls width="360px">
-                            <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
-                            <a href="{{ .VideoLocation }}">The Video</a>
-                        </video>
-                        {{ end }}
-                    </div>
-                </div>
-            </div>
             {{ if not (eq .GetImageCount 0) }}
-            <div class="item-table-caption">
-                <div class="image-box">
+            <div class="item-table-caption flex-row">
+                <div class="image-box flex-row">
                     {{ range .GetImages }}
                     <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
                     {{ end }}
diff --git a/index.js b/index.js
index e69de29..a2fbdec 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,4 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
diff --git a/light.css b/light.css
index 5c608bb..25b6b22 100644
--- a/light.css
+++ b/light.css
@@ -1,3 +1,7 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 body{
     color: #060606;
     background-color: #fafaf9;
@@ -12,7 +16,7 @@ a{
 .home-button > div, .sort-button > div, .menu a, .so-pane > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > input, .so-pane > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
diff --git a/pageHandler/pages/index/data.go b/pageHandler/pages/index/data.go
index acd977a..97e9eb9 100644
--- a/pageHandler/pages/index/data.go
+++ b/pageHandler/pages/index/data.go
@@ -3,18 +3,19 @@ package index
 import "html/template"
 
 type DataYaml struct {
-	HeaderLinks          map[string]template.URL `yaml:"headerLinks"`
-	CSSBaseURL           template.URL            `yaml:"cssBaseURL"`
-	CSSLightURL          template.URL            `yaml:"cssLightURL"`
-	CSSDarkURL           template.URL            `yaml:"cssDarkURL"`
-	JScriptURL           template.URL            `yaml:"jScriptURL"`
-	NoVideoImageLocation template.URL            `yaml:"noVideoImageLocation"`
-	LogoImageLocation    template.URL            `yaml:"logoImageLocation"`
-	SunImageLocation     template.URL            `yaml:"sunImageLocation"`
-	MoonImageLocation    template.URL            `yaml:"moonImageLocation"`
-	SortImageLocation    template.URL            `yaml:"sortImageLocation"`
-	About                AboutYaml               `yaml:"about"`
-	Entries              []EntryYaml             `yaml:"entries"`
+	HeaderLinks            map[string]template.URL `yaml:"headerLinks"`
+	CSSBaseURL             template.URL            `yaml:"cssBaseURL"`
+	CSSLightURL            template.URL            `yaml:"cssLightURL"`
+	CSSDarkURL             template.URL            `yaml:"cssDarkURL"`
+	JScriptURL             template.URL            `yaml:"jScriptURL"`
+	PlayVideoImageLocation template.URL            `yaml:"playVideoImageLocation"`
+	NoVideoImageLocation   template.URL            `yaml:"noVideoImageLocation"`
+	LogoImageLocation      template.URL            `yaml:"logoImageLocation"`
+	SunImageLocation       template.URL            `yaml:"sunImageLocation"`
+	MoonImageLocation      template.URL            `yaml:"moonImageLocation"`
+	SortImageLocation      template.URL            `yaml:"sortImageLocation"`
+	About                  AboutYaml               `yaml:"about"`
+	Entries                []EntryYaml             `yaml:"entries"`
 }
 
 func (dy DataYaml) GetHeaderLabels() []string {