Add drop shadows to remaining elements

diff --git a/index.html b/index.html
index 8f3e5dfc5701cd95208658a7e1f6a90c64662de6..0550acfcea3fc9f01de5118d405eda6f9c0a0a68 100644 (file)
--- a/index.html
+++ b/index.html
@@ -48,6 +48,13 @@
         border-radius: 4px;
         padding: 4px;
         animation: 800ms fadeIn both;
+        transition: filter 800ms;
+      }
+
+      :host(:hover),
+      :host(:focus-within) {
+        filter: drop-shadow(0 0 4px hsl(222deg 50% 50%));
+        transition: filter 400ms;
       }
 
       ::slotted(*) {

diff --git a/style.css b/style.css
index 459ce3ef28d14624997306bd2943d8b17d1a017a..85bfdabfc544adc04c814765eb18316854269f47 100644 (file)
--- a/style.css
+++ b/style.css
@@ -64,7 +64,7 @@ a {
 
 a:hover,
 a:focus-within {
-  filter: brightness(120%);
+  filter: brightness(120%) drop-shadow(0 0 4px hsl(222deg 50% 50%));
   transition: filter 400ms;
 }