paper style

assets/sass/pages/buttons.scss

@@ -72,7 +72,7 @@
   }
 
   .buttons-header {
-    width: 300px;
+    width: 400px;
     margin: auto;
     margin-top: 2rem;
     transform: rotate(-3deg);
@@ -274,6 +274,35 @@
   max-width: 800px;
   margin: 4rem auto 0;
   padding: 2rem;
+  perspective: 400px;
+
+  // Show as a grid with 2 colums
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+
+  .buttons-paper {
+    position: relative;
+    // Paper-like background
+    background: #f9f9f9;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e0e0e0;
+    // Lined background
+    background-image: linear-gradient(
+      to bottom,
+      #f9f9f9 0%,
+      #f9f9f9 95%,
+      #e0e0e0 95%,
+      #e0e0e0 100%
+    );
+    background-size: 100% 24px;
+    // Add a slight perspective so it looks like its on the table
+    transform: rotateX(25deg) translateZ(20px);
+    transform-style: preserve-3d;
+    transform-origin: bottom center;
+  }
 
   p {
     margin-bottom: 1.5rem;