Add mobile layout.

index.html

@@ -25,6 +25,7 @@
         <div id="inputBox"></div>
     </main>
     <aside class="closed" id="options">
+        <p class="mobilePopupExit" onclick="togglePopup('#options')">Close</p>
         <h2>Options</h2>
         <div id="settingsOptions">
             <div id="newVariation">
@@ -45,6 +46,7 @@
     </aside>
 
     <aside class="closed" id="Preview">
+        <p class="mobilePopupExit" onclick="togglePopup('#preview')">Close</p>
         <h2>Preview</h2>
         <div id="previewTextBox"></div>
     </aside>

style.css

@@ -3,7 +3,6 @@
     margin: 0;
     box-sizing: border-box;
     user-select: none;
-    /* scrollbar-width: thich; */
     scrollbar-color: white black;
     --border-contrast: darkgray;
 }
@@ -23,7 +22,7 @@ h1, h2 {
 
 #previewText::after {
     content: "↩";
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(0, 0, 0, 0.4);
 }
 
 body {
@@ -39,19 +38,8 @@ body {
     transition: .2s;
 }
 
-/* .stringParagraph:hover {
-    border-left-width: 1.05em;
-}
-
-.stringParagraph:hover::before {
-    content: ">";
-    color: black;
-    margin-left: -1em;
-} */
-
 .paragraphContainer::before {
     color: white;
-    /* text-decoration:underline; */
     border: medium solid white;
     border-bottom: none;
     padding: .2em;
@@ -123,26 +111,31 @@ aside {
     overflow-y: auto;
 }
 
+aside p {
+    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+}
+
 aside::before {
-  filter: grayscale(1);
-  content: "";
-  position: absolute;
-  inset: 0;
+    filter: grayscale(1);
+    content: "";
+    position: absolute;
+    inset: 0;
     
-  opacity: .2;
+    opacity: .1;
     
-  background-size: contain;
-  background-position: left bottom;
-  background-image: url('./background.png');
-  background-repeat: no-repeat;
+    background-size: cover;
+    background-position: left top;
+    background-image: url('./background.png');
+    background-repeat: no-repeat;
+    transform: rotateX(180deg);
     
-  z-index: 0;
-  pointer-events: none
+    z-index: 0;
+    pointer-events: none
 }
 
 aside > * {
-  position: relative;
-  z-index: 1;
+    position: relative;
+    z-index: 1;
 }
 
 aside.closed {
@@ -215,6 +208,25 @@ header h1 {
     background-size: 400% 100%;
 }
 
+.mobilePopupExit {
+    display: none;
+    font-size: large;
+}
+
+.mobilePopupExit::before {
+    content: "< ";
+}
+
+@media screen and (max-width: 1280px) {
+    aside {
+        width: 100vw;
+    }
+    
+    .mobilePopupExit {
+        display: unset;
+    }
+}
+
 @keyframes movingGradientAnimation {
     0%,100% {
         background-position: 0 0;