All animations built

www/css/main.css

@@ -83,6 +83,7 @@ textarea {
   resize: vertical;
 }
 
+
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
@@ -92,6 +93,11 @@ textarea {
   --flo-bg-color: #601F22;
 }
 
+div {
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
 #view {
   width: 100vw;
 }
@@ -99,23 +105,23 @@ textarea {
 #container {
   min-height: 100vh;
   width: 100vw;
-  /* position: relative; */
 }
 
 .main {
-  position: relative;
+  display: flex;
   float: left;
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .splash {
   float: left;
   width: 0;
   height: 0;
-  overflow: hidden;
 }
 
-.splash .splash-container {
+.splash-container {
   height: 100%;
   width: 100%;
   padding: 1rem;
@@ -123,22 +129,54 @@ textarea {
 
 .splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
 
-.banner {
-  position: absolute;
+/* .banner {
+  position: relative;
   width: 100%;
-  top: 50%;
-  -ms-transform: translateY(-50%);
+  height: 100%;
+  margin: auto 0 auto 0;
+  /* top: 50%; */
+  /* -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   text-align: center;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+} */
+
+.banner {
+  flex: 0 0 100%;
+  text-align: center;
 }
 
 .banner img {max-width: 20vw; max-height: 20vh; }
 
-.jason {
+.links {
+  height: 0;
+  /* flex: 0 0 100%; */
+}
+
+.links ul {
+  width: 80%;
+  margin: 0 auto 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+.links li a {
+  display: block;
+  background-color: #FF0000;
+  height: 3rem;
+  line-height: 3rem;
+  margin-bottom: 0.5rem;
+  border-radius: 1rem;
+  text-align: center;
+}
+
+.splash.jason, .main.jason {
   background-color: var(--jason-bg-color);
 }
 
-.flo {
+.splash.flo, .main.flo {
   background-color: var(--flo-bg-color);
 }