Improve focus outline styling

diff --git a/index.html b/index.html
index 7c1137f738cb8ef5b13226e7694e03cb944aac86..805d075a34160a041331e66329bc30d8fc2b7d0d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -82,6 +82,20 @@
       font-weight: 700;
     }
 
+    button,
+    textarea,
+    a {
+      border-radius: 4px;
+      outline: 2px solid transparent;
+      outline-offset: 1px;
+      transition: outline-color 400ms;
+
+      &:focus-within {
+        transition: outline-color 200ms;
+        outline-color: hsl(216deg 50% 40%);
+      }
+    }
+
     button {
       line-height: 0;
       background: none;
@@ -109,7 +123,6 @@
       max-inline-size: calc(100cqi - 16px);
       min-block-size: 15rem;
       padding: 4px;
-      border-radius: 4px;
       border: 1px solid hsl(216deg 50% 80%);
     }
 
@@ -165,11 +178,12 @@
     a {
       font-weight: 700;
       text-decoration: none;
+      color: hsl(216deg 50% 40%);
     }
 
     a:hover,
     a:focus {
-      text-decoration: underline;
+      text-decoration: 2px underline hsl(216deg 50% 40%);
     }
 
     abbr {