diff --git a/src/components/Card.astro b/src/components/Card.astro
index 9106f30..6a3c1eb 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -6,7 +6,7 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<article class="flex flex-col bg-base-200 p-8 rounded-sm border border-neutral shadow-neutral shadow-[6px_6px_0_0] min-h-72 break-inside-avoid-column">
+<article class="flex flex-col bg-base-200 p-8 rounded-sm border border-neutral shadow-neutral shadow-[6px_6px_0_0] min-h-72 break-inside-avoid-column cool-background">
     <h3 class="text-2xl font-medium mb-4">{title}</h3>
     <slot />
 </article>
diff --git a/src/styles/style.css b/src/styles/style.css
index df2accc..2968df0 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -65,6 +65,14 @@ neutral: 'rgb(var(--color-neutral) / <alpha-value>)',
   }
 }
 
+@utility cool-background {
+    @apply bg-base-100 bg-blend-lighten;
+    background-image:  linear-gradient(135deg, var(--color-base-300) 25%, transparent 25%), linear-gradient(225deg, var(--color-base-300) 25%, transparent 25%), linear-gradient(45deg, var(--color-base-300) 25%, transparent 25%), linear-gradient(315deg, var(--color-base-300) 25%, var(--color-base-100) 25%);
+    background-position:  4px 0, 4px 0, 0 0, 0 0;
+    background-size: 4px 4px;
+    background-repeat: repeat;
+}
+
 @layer base {
     html, body {
         @apply bg-base-100 text-base-content;