💈🦪 Updated with Glitch

styles/details.css

@@ -16,6 +16,10 @@ details summary {
   cursor: pointer;
 }
 
+details ::marker {
+  content: "+ ";
+}
+
 #expand-all summary {
   background-color: var(--color-accent);
 }

styles/main.css

@@ -1,10 +1,5 @@
 /* Our default values set as CSS variables */
 :root {
-  --color-bg: #2e303e;
-  --color-text-main: #ebeeef;
-  --color-primary: #25b0bc;
-  --color-accent: #ee9fcb;
-  --color-warn: #fccf08;
   --wrapper-height: 87vh;
   --image-max-width: 300px;
   --image-margin: 3rem;
@@ -18,6 +13,7 @@
   --color-text-main: #2e303e;
   --color-primary: #18737b;
   --color-accent: #94195d;
+  --color-warn: #d43a58;
 }
 
 .dark {
@@ -25,6 +21,7 @@
   --color-text-main: #ebeeef;
   --color-primary: #25b0bc;
   --color-accent: #ee9fcb;
+  --color-warn: #fec81a;
 }
 
 /* Basic page style resets */
@@ -59,6 +56,7 @@ a:visited {
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
+  border-radius: 1rem;
 }
 
 a:after {
@@ -169,7 +167,7 @@ body {
   margin: 0 1rem;
 }
 
-.content {
+main {
   display: block;
   flex-direction: column;
   align-items: center;
@@ -184,18 +182,22 @@ h1 {
   text-align: center;
 }
 
-.content a:link,
-.content a:visited {
+main a:link,
+main a:visited {
   color: var(--color-accent);
 }
 
 @media (hover: hover) {
-  .content a:hover {
+  main a:hover {
     background: var(--color-accent);
     color: var(--color-bg);
   }
 }
 
+:focus-visible {
+  outline: 3px solid var(--color-warn);
+}
+
 /* Very light scaling for our title */
 .title {
   color: var(--color-accent);
@@ -221,4 +223,4 @@ h3,
 h4 {
   color: var(--color-primary);
   font-size: 2rem;
-}
+}