all the js shit. yea all of it. gonna do some changes so commiting before i break shit

assets/base.css

@@ -2,7 +2,8 @@
 
 html {
     background-color: var(--c-bg);
-    scrollbar-color: var(--c-border) transparent
+    scrollbar-color: var(--c-border) transparent;
+    scrollbar-width: thin;
 }
 
 /* text, links and lists :3 */
@@ -14,7 +15,7 @@ t {
 }
 
 
-p {
+p, d {
     font-family: "mono";
     color: var(--c-fg);
     margin-top: 0;
@@ -27,11 +28,15 @@ a {
     text-decoration: none;
 }
 
-a:hover {
+a:focus {
     color: var(--c-bg);
     background-color: var(--c-highlight);
 }
 
+:is(a, d) + p {
+    display: none
+}
+
 ul {
     margin: 0 0 0 -16px;
 }
@@ -42,7 +47,7 @@ li {
 
 /* lil text on the borders :3 */
 
-.title, .credit, .skip-notice {
+.title, .title2, .credit, .skip-notice {
     height: 24px;
     background-color: var(--c-bg);
     color: var(--c-title);
@@ -68,12 +73,13 @@ li {
     right: 8px;
     color: var(--c-fg);
     background-color: transparent;
-    font-weight: normal
+    font-weight: normal;
+    opacity: 0
 }
 
 /* here are some @media rules to choose when to display ascii art */
 
-.ascii, .splash {
+.ascii > div, .splash {
     font-family: "mono";
     color: var(--c-fg);
     white-space: pre;
@@ -89,13 +95,13 @@ li {
 
 @media screen and (min-width: 420px) and (max-width: 649px) {
     .ascii-2 {
-        display: block
+        display: block !important
     }
 }
 
 @media screen and (min-width: 650px) {
     .ascii-1 {
-        display: block;
+        display: block !important
     }
 }
 
@@ -109,8 +115,7 @@ body > .nojs {
     overflow: hidden
 }
 
-
-main {
+main, .js > div > div {
     overflow: hidden auto;
     width: 100%;
     height: 100%;
@@ -118,111 +123,80 @@ main {
     box-sizing: border-box;
 }
 
-/* loading animation */
-
-@keyframes appear {
-    0% {
-        visibility: visible;
-        display: block
-    }
-    99% {
-        visibility: hidden;
-        display: none
-    }
-}
-
-.nojs {
-    animation: 4.5s 1 reverse appear;
-    animation-delay: 4.5s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.credit {
-    animation: 4.5s 1 reverse appear;
-    animation-delay: 4.5s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.skip-animation {
-    animation: 4.5s 1 linear appear;
+/* styling for the js mode! */
+.js {
     visibility: hidden;
+    border: 2px solid var(--c-border);
+    box-sizing: border-box;
     position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
+    width: calc(100vw - 16px);
+    height: calc(100vh - 16px);
+    top: 8px;
+    left: 8px
 }
 
-.loading > p:first-child {
-    animation: 0.9s 1 linear appear;
-    animation-fill-mode: forwards;
-    animation-delay: 0.3s;
-    visibility: hidden;
-    position: fixed
+.js > div {
+    box-sizing: border-box;
+    border: 2px solid var(--c-border);
+    overflow: hidden;
+    position: fixed;
 }
 
-.loading > p:not(:first-child):not(:last-child) {
-    animation: 0.9s 1 linear appear;
-    animation-delay: 1.2s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.loading > p:last-child {
-    animation: 0.9s 1 linear appear;
-    animation-delay: 2.1s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-@keyframes splash {
-    0%, 100% {
-        visibility: visible;
-        color: var(--c-bg);
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+@media screen and (min-aspect-ratio: 1/1) {
+    .js > div:first-child {
+        width: calc(50vw - 4px - 11px);
+        height: calc(100vh - 16px - 10px);
+        top: 13px;
+        left: 13px
+    }
+    .js > div:last-child {
+        width: calc(50vw - 4px - 11px);
+        height: calc(100vh - 16px - 10px);
+        top: 13px;
+        right: 13px
+    }
+    .title2 {
+        top: 0;
+        left: calc(50vw + 32px);
     }
 }
 
-.splash {
-    animation-duration: 1.5s, 1.5s;
-    animation-iteration-count: 1, 1;
-    animation-timing-function: linear, linear;
-    animation-name: appear, splash;
-    animation-delay: 3s, 3s;
-    visibility: hidden;
-    position: fixed
-}
-
-@keyframes splash-bg {
-    0%, 100% {
-        background-color: var(--c-splash);
+@media screen and (max-aspect-ratio: 1000/1001) {
+    .js > div:first-child {
+        width: calc(100vw - 16px - 10px);
+        height: calc(50vh - 4px - 11px);
+        top: 13px;
+        left: 13px
+    }
+    .js > div:last-child {
+        width: calc(100vw - 16px - 10px);
+        height: calc(50vh - 4px - 11px);
+        bottom: 13px;
+        left: 13px
+    }
+    .title2 {
+        top: calc(50vh - 12px);
+        left: 32px;
     }
 }
 
-html {
-    animation: 1.5s 1 linear splash-bg;
-    animation-delay: 3s
+.js > div:only-child {
+    width: calc(100vw - 16px - 10px);
+    height: calc(100vh - 16px - 10px);
+    top: 13px;
+    left: 13px
 }
 
-@keyframes splash-fg {
-    0%, 100% {
-        color: var(--c-bg);
-    }
+.buttons {
+    white-space: pre;
+    margin-left: 24px
 }
 
-.skip-notice {
-    animation-duration: 4.5s, 1.5s;
-    animation-iteration-count: 1, 1;
-    animation-timing-function: linear, linear;
-    animation-name: appear, splash-fg;
-    animation-delay: 0s, 3s;
-    visibility: hidden;
+.back {
+    margin-bottom: 8px;
+    display: inline-block
+}
+
+:focus {
+    outline: none
 }