better spotlights

src/index.css

@@ -120,11 +120,11 @@ code {
 }
 
 .spotlight1 {
-  background: theme('colors.primary.dark');
+  background: theme('colors.background.default');
 
   position: fixed;
-  height: 100px;
-  width: 300px;
+  height: 10vmax;
+  width: 30vmax;
   border-radius: 100%;
   transform: translate(50%, 50%);
   animation-duration: 30s, 60s;
@@ -138,15 +138,15 @@ code {
   opacity: 0.8;
   mix-blend-mode: screen;
 
-  filter: blur(125px);
+  filter: blur(10vmax);
 }
 
 .spotlight2 {
-  background: theme('colors.primary.dark');
+  background: theme('colors.background.default');
 
   position: fixed;
-  height: 300px;
-  width: 100px;
+  height: 30vmax;
+  width: 10vmax;
   border-radius: 100%;
   transform: translate(50%, 50%);
   animation-duration: 60s, 120s;
@@ -158,7 +158,7 @@ code {
   opacity: 0.8;
   mix-blend-mode: screen;
 
-  filter: blur(125px);
+  filter: blur(10vmax);
 }
 
 input[type='range'] {

tailwind.config.ts

@@ -12,7 +12,8 @@ export const baseColors = {
     dark: '#4a6151',
   },
   background: {
-    default: '#35374B',
+    default: '#2E3041', // Orig: #35374B
+    spotlight: '#777BA7',
     backdrop: 'rgba(0, 0, 0, 0.3)',
     settings: 'rgba(0, 0, 0, 0.8)',
   },