some changes

src/static/css/tailwind.css

@@ -518,12 +518,18 @@
   }
 }
 @layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
@@ -593,6 +599,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -608,9 +617,21 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -659,15 +680,21 @@
   .max-w-\[75\%\] {
     max-width: 75%;
   }
-  .max-w-\[590px\] {
+  .max-w-\[500px\] {
-    max-width: 590px;
+    max-width: 500px;
   }
   .max-w-\[1210px\] {
     max-width: 1210px;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-center {
     transform-origin: center;
   }
@@ -695,9 +722,15 @@
     --tw-scale-z: 150%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
   .animate-ping {
     animation: var(--animate-ping);
   }
+  .resize {
+    resize: both;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -822,9 +855,6 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-14 {
-    padding-block: calc(var(--spacing) * 14);
-  }
   .text-right {
     text-align: right;
   }
@@ -858,6 +888,20 @@
   .text-white {
     color: var(--color-white);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -907,19 +951,34 @@
       flex-shrink: 1;
     }
   }
-  .md\:scale-95 {
+  .sm\:py-14 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 14);
+    }
+  }
+  .sm\:py-\[200px\] {
+    @media (width >= 40rem) {
+      padding-block: 200px;
+    }
+  }
+  .md\:-my-8 {
     @media (width >= 48rem) {
-      --tw-scale-x: 95%;
+      margin-block: calc(var(--spacing) * -8);
-      --tw-scale-y: 95%;
+    }
-      --tw-scale-z: 95%;
+  }
+  .md\:scale-85 {
+    @media (width >= 48rem) {
+      --tw-scale-x: 85%;
+      --tw-scale-y: 85%;
+      --tw-scale-z: 85%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .md\:scale-100 {
+  .md\:scale-90 {
     @media (width >= 48rem) {
-      --tw-scale-x: 100%;
+      --tw-scale-x: 90%;
-      --tw-scale-y: 100%;
+      --tw-scale-y: 90%;
-      --tw-scale-z: 100%;
+      --tw-scale-z: 90%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
@@ -949,17 +1008,40 @@
       letter-spacing: var(--tracking-normal);
     }
   }
-  .lg\:scale-90 {
+  .lg\:mt-16 {
     @media (width >= 64rem) {
-      --tw-scale-x: 90%;
+      margin-top: calc(var(--spacing) * 16);
-      --tw-scale-y: 90%;
+    }
-      --tw-scale-z: 90%;
+  }
+  .lg\:scale-95 {
+    @media (width >= 64rem) {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .xl\:mt-2 {
+  .lg\:scale-100 {
+    @media (width >= 64rem) {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .lg\:flex-row {
+    @media (width >= 64rem) {
+      flex-direction: row;
+    }
+  }
+  .xl\:my-0 {
     @media (width >= 80rem) {
-      margin-top: calc(var(--spacing) * 2);
+      margin-block: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:mt-0 {
+    @media (width >= 80rem) {
+      margin-top: calc(var(--spacing) * 0);
     }
   }
   .xl\:max-h-none {
@@ -967,17 +1049,9 @@
       max-height: none;
     }
   }
-  .xl\:scale-95 {
+  .xl\:max-w-\[590px\] {
     @media (width >= 80rem) {
-      --tw-scale-x: 95%;
+      max-width: 590px;
-      --tw-scale-y: 95%;
-      --tw-scale-z: 95%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-  .xl\:flex-row {
-    @media (width >= 80rem) {
-      flex-direction: row;
     }
   }
 }
@@ -1045,6 +1119,31 @@ body {
   inherits: false;
   initial-value: 1;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1100,6 +1199,83 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;

src/templates/Bento.tsx

@@ -3,7 +3,7 @@ import Footer from "./Footer";
 
 export default function Bento() {
   return (
-    <div className="w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
+    <div className="px-8 mt-8 lg:mt-16 xl:mt-0 w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
       <BentoCard
         logo="/static/images/logos/xbb.png"
         image="/static/images/cards/xbb.png"

src/templates/Title.tsx

@@ -1,7 +1,7 @@
 export default function Title() {
   return (
-    <div className=" min-h-[438px] flex gap-4 px-8 flex-col-reverse xl:flex-row items-center justify-center">
+    <div className="min-h-[438px] flex gap-4 px-8 flex-col-reverse lg:flex-row items-center justify-center">
-      <div className="flex items-center justify-center gap-4 flex-col max-w-[590px]">
+      <div className="flex items-center justify-center gap-4 flex-col w-full max-w-[500px] xl:max-w-[590px]">
         <h1 className="text-[#FF851A] text-[64px] md:text-[128px] ubuntu-mono-regular leading-none">
           WAH.su<span className="text-[32px] md:text-[48px]">(d0)</span>
         </h1>
@@ -10,9 +10,20 @@ export default function Title() {
           non-company, 200% wah!
         </p>
       </div>
-      <a href="https://wahs.wah.su" className="hover:-rotate-5 origin-center transition-transform  grid grid-cols-1 grid-rows-1 flex-shrink-0 sm:flex-shrink-1 py-14 md:py-0">
+      <a
-        <img className="col-[1] row-[1] scale-150 max-h-[512px] xl:max-h-none md:scale-100 -z-10" src="/static/images/card-blur.png" alt=""></img>
+        href="https://wahs.wah.su"
-        <img className="col-[1] row-[1] scale-140  md:scale-95 lg:scale-90 xl:scale-95 xl:mt-2 max-h-[512px] xl:max-h-none" src="/static/images/card.png" alt="Sleeping red panda on the tree"></img>
+        className="hover:-rotate-5 origin-center transition-transform  grid grid-cols-1 grid-rows-1 items-center justify-center flex-shrink-0 sm:flex-shrink-1 py-8 sm:py-14 md:py-0 md:-my-8 xl:my-0"
+      >
+        <img
+          className="col-[1] row-[1] scale-150 max-h-[512px] xl:max-h-none md:scale-90 lg:scale-100 -z-10"
+          src="/static/images/card-blur.png"
+          alt=""
+        ></img>
+        <img
+          className="col-[1] row-[1] scale-140 md:scale-85 lg:scale-95 max-h-[512px] xl:max-h-none"
+          src="/static/images/card.png"
+          alt="Sleeping red panda on the tree"
+        ></img>
       </a>
     </div>
   );