style: dotted bg for whole page

src/layouts/Layout.astro

@@ -51,9 +51,7 @@ const ogFileType = 'image/png'
         font-size: var(--font-size-base);
         color: var(--text-color-dark);
         background-color: var(--text-color-light);
-      }
 
-      body {
         background-image: radial-gradient(
           circle,
           hsl(var(--dot-grid-light)) 1px,
@@ -61,22 +59,20 @@ const ogFileType = 'image/png'
         );
         background-size: 24px 24px;
         background-position: -24px -24px;
-
-        @media (prefers-color-scheme: dark) {
-          background-image: radial-gradient(
-            circle,
-            hsl(var(--dot-grid-dark)) 1px,
-            transparent 1px
-          );
-        }
       }
 
       @media (prefers-color-scheme: dark) {
         html,
         body,
         * {
-          background: var(--bg-darker);
+          background-color: var(--bg-darker);
           color: var(--text-color-light);
+
+          background-image: radial-gradient(
+            circle,
+            hsl(var(--dot-grid-dark)) 1px,
+            transparent 1px
+          );
         }
       }
 

src/layouts/variables.css

@@ -28,5 +28,5 @@
   --bg-darkest: #000;
 
   --dot-grid-light: 214 32% 82%;
-  --dot-grid-dark: 215 25% 20%;
+  --dot-grid-dark: 215 25% 25%;
 }