Efecto 3D

src/styles.css

@@ -18,6 +18,20 @@
   --color-blue-900: #000a2a;
   --color-blue-950: oklch(0.10 0.04 259);
 
+
+  --color-red-50: #fdecef;
+  --color-red-100: #f9cdd5;
+  --color-red-200: #f4a9b8;
+  --color-red-300: #ef768d;
+  --color-red-400: #ea425f;
+  --color-red-500: #d21034;
+  /* Base Red */
+  --color-red-600: #b30d2d;
+  --color-red-700: #8e0a23;
+  --color-red-800: #690719;
+  --color-red-900: #45050f;
+  --color-red-950: oklch(0.25 0.16 20);
+
 }
 
 @plugin "tailwindcss-animate";
@@ -50,6 +64,8 @@
   --chart-4: hsl(43 74% 66%);
   --chart-5: hsl(27 87% 67%);
   --radius: 1rem;
+
+  font-size: calc(100% + 0.5rem);
 }
 
 .dark {
@@ -110,6 +126,15 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+#root {
+  background-image: url('/la-salle.png');
+  /* Replace with your image path */
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  background-size: contain;
+  /* Adjust based on needs */
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;