Add subtle rainbow background on hover

diff --git a/style.css b/style.css
index 6bd898cc6c39e7476687f130e77e9eb5b2052793..67752bedf793916353ae23d7a971ce9ad013c0c4 100644 (file)
--- a/style.css
+++ b/style.css
@@ -114,19 +114,19 @@ code:not(.hljs) {
     0px 4.3px 4.8px -1.2px hsl(0deg 0% 69% / 0.17),
     0px 8.4px 9.5px -1.9px hsl(0deg 0% 69% / 0.17),
     0.1px 16px 18px -2.5px hsl(0deg 0% 69% / 0.17);
-  background: hsl(0deg 0% 90%);
+  background: hsl(216deg 40% 95% / 0.5);
   transition: border-color 700ms, background-color 700ms;
   position: relative;
 }
 
 .card > * {
   margin: 0; /* Margins for children elements are already handled by gap in .card */
-  background: inherit;
+  background: transparent;
 }
 
 .card:hover, .card:focus-within {
-  border: solid hsl(216deg 20% 55% / 0.1);
-  background: hsl(216deg 20% 90%);
+  border: solid transparent;
+  background: hsl(216deg 40% 95% / 0.95);
   transition: border-color 250ms, background-color 250ms;
 }