more stuff

index.html

@@ -51,11 +51,13 @@
             <img src="data/obama.png" />
         </marquee>
         <p class="sprinkler">
-            Call 1-800-1ST-YEAR to get a sprinkler to go off in a room near you!
+            Call 1-800-1ST-YEAR to get a sprinkler to go off in a dorm near you!
         </p>
+        <div class="wrapper">
             <p id="middle">
                 important stuff
             </p>
+        </div>
         <table class="middle">
             <tr>
                 <td>

style.css

@@ -4,12 +4,12 @@ html, body, #mainBod {
 }
 
 #mainBod {
-    position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
     overflow: auto;
     background-image: url("data/rit.webp");
     width: 100vw;
+    min-height: 100%;
     height: 100vh;
     animation: bg 1s linear infinite alternate;
     display: flex;
@@ -36,14 +36,19 @@ html, body, #mainBod {
 }
 
 #middle {
-    font-size: 30px;
+    font-size: 2em;
     width: fit-content;
-    margin-left: 12.5%;
     background-color: black;
     color: orange;
     animation: across 2s linear infinite;
 }
 
+.wrapper {
+    animation: across_parent 2s linear infinite;
+    width: 80%;
+    margin-left: 10%;
+}
+
 td a {
     color: yellow;
 }
@@ -82,7 +87,9 @@ footer {
     position: sticky;
     bottom: 0;
     height: 10%;
+    min-height: 10%;
     margin: 0;
+    overflow: auto;
 }
 
 .buttons {
@@ -169,7 +176,7 @@ html.dither>body>div{
 }
 
 html.dither>body>div>div{
-filter: initial;
+    filter: initial;
     mix-blend-mode: soft-light;
     isolation: isolate;
     image-rendering: initial;
@@ -187,7 +194,7 @@ filter: initial;
 .munson {
     text-align: center;
     width: 80%;
-    font-size: 50px;
+    font-size: 5vh;
     padding: 0;
     margin: 0;
     margin-bottom: 1em;
@@ -201,7 +208,7 @@ filter: initial;
 }
 
 #munson img {
-    height: 20em;
+    height: 20vh;
     width: 100%;
 }
 
@@ -286,10 +293,20 @@ filter: initial;
 @keyframes across {
     0%,
     100% {
-      transform: translateX(0vw);
+      transform: translateX(0%);
     }
     50% {
-      transform: translateX(62.5vw);
+      transform: translateX(-100%);
+    }
+}
+
+@keyframes across_parent {
+    0%,
+    100% {
+      transform: translateX(0%);
+    }
+    50% {
+      transform: translateX(100%);
     }
 }