Fix SVG drop-shadow transition out

Need to duplicate transition: filter to pre:hover selector since it has higher specificity than svg

diff --git a/index.html b/index.html
index a5ead3c0a1105ee2d6aa14571b5f275abb848494..dee623dde64f0abd0ee2b37c8c12a1b51f9985ef 100644 (file)
--- a/index.html
+++ b/index.html
@@ -110,17 +110,17 @@
       display: block;
       pointer-events: none;
       opacity: 0.5;
-      transition: opacity 400ms;
+      transition: opacity 400ms, filter 400ms;
     }
 
     :is(pre:hover, pre:focus-within) svg {
-      transition: opacity 200ms;
+      transition: opacity 200ms, filter 400ms;
       opacity: 0.9;
     }
 
     :is(button:hover, button:focus-within) svg {
       filter: drop-shadow(0 0 16px hsl(216deg 50% 65%));
-      transition: filter 200ms;
+      transition: opacity 200ms, filter 200ms;
     }
 
     pre,