1 files changed, 117 insertions, 0 deletions
diff --git a/static/input.css b/static/input.css
index e1ba37d..9114514 100644
--- a/static/input.css
+++ b/static/input.css
@@ -723,6 +723,123 @@ body[data-theme~="ram"] .leaflet-tile {
     filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
 }
 
+@media (min-aspect-ratio: 0.8/1) {
+    .ar-gt-0\.8\:mr-6 {
+        margin-right: 1.5rem;
+    }
+
+    .ar-gt-0\.8\:w-fit {
+        width: fit-content;
+    }
+
+    .ar-gt-0\.8\:w-\[100dvh\] {
+        width: 100dvh;
+        flex-basis: 100dvh;
+    }
+
+    .ar-gt-0\.8\:min-w-fit {
+        min-width: fit-content;
+    }
+
+    .ar-gt-0\.8\:min-w-1\/10 {
+        min-width: 10%;
+    }
+
+    .ar-gt-0\.8\:max-w-1\/4 {
+        max-width: 25%;
+    }
+
+    .ar-gt-0\.8\:items-center {
+        align-items: center;
+    }
+}
+
+@media (max-aspect-ratio: 0.8/1) {
+    .bg-pattern-body {
+        background-size: 10dvh;
+    }
+
+    .ar-lt-0\.8\:grid {
+        display: grid;
+    }
+
+    .ar-lt-0\.8\:flex-col {
+        flex-direction: column;
+    }
+
+    .ar-lt-0\.8\:flex-row {
+        flex-direction: row;
+    }
+
+    .ar-lt-0\.8\:h-\[8dvh\] {
+        height: 8dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[10dvh\] {
+        height: 10dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[30dvh\] {
+        height: 30dvh;
+    }
+
+    .ar-lt-0\.8\:h-\[90dvh\] {
+        height: 90dvh;
+    }
+
+    .ar-lt-0\.8\:w-\[8dvh\] {
+        width: 8dvh;
+    }
+
+    .ar-lt-0\.8\:w-\[80\%\] {
+        width: 80%;
+    }
+
+    .ar-lt-0\.8\:w-\[90dvw\] {
+        width: 90dvw;
+    }
+
+    .ar-lt-0\.8\:w-\[100dvw\] {
+        width: 100dvw;
+    }
+
+    .ar-lt-0\.8\:max-h-\[30\%\] {
+        max-height: 30%;
+    }
+
+    .ar-lt-0\.8\:max-h-\[80\%\] {
+        max-height: 80%;
+    }
+
+    .ar-lt-0\.8\:max-h-\[92dvh\] {
+        max-height: 92dvh;
+    }
+
+    .ar-lt-0\.8\:text-\[5dvh\] {
+        font-size: 5dvh;
+    }
+
+    .ar-lt-0\.8\:hidden {
+        display: none;
+    }
+}
+
+@media (min-aspect-ratio: 0.6/1) {
+    .ar-gt-0\.6\:flex-3\/5 {
+        flex: 60%;
+    }
+
+    .ar-gt-0\.6\:flex-2\/5 {
+        flex: 40%;
+    }
+}
+
+@media (max-aspect-ratio: 0.6/1) {
+    .ar-lt-0\.6\:flex-col {
+        flex-direction: column;
+    }
+}
+
 .home-page-heart {
     position: absolute;
     color: var(--color-pink-700);