cleanup

src/styles/global.css

@@ -53,6 +53,16 @@ h2 {
     margin-block: 1.5rem 0.5rem;
 }
 
+a {
+    color: var(--primary-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+a:hover {
+    color: var(--hover-color);
+}
+
 a:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px var(--focus-shadow-color);
@@ -64,6 +74,58 @@ hr {
     border-top: 4px solid var(--primary-color);
 }
 
+.details-list details {
+    font-family: "JetBrains Mono", monospace;
+}
+
+.details-list summary {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary-color);
+    font-size: 1.3em;
+    font-weight: bold;
+    margin-block: 1.5rem 0.5rem;
+    list-style: none;
+}
+
+.details-list summary::-webkit-details-marker {
+    display: none;
+}
+
+.details-list summary::after {
+    content: ' ▼';
+    font-size: 0.6em;
+    opacity: 0.7;
+    margin-inline-start: 0.3rem;
+}
+
+.details-list details[open]>summary::after {
+    content: ' ▲';
+}
+
+.details-list details>div {
+    margin-top: 1rem;
+    margin-inline-start: var(--spacing-md);
+}
+
+.details-list dt {
+    color: var(--primary-color);
+    font-weight: bold;
+    font-size: 1.17em;
+    margin-inline-start: var(--spacing-md);
+    margin-top: 1rem;
+}
+
+.details-list dt:first-of-type {
+    margin-top: 0;
+}
+
+.details-list dd {
+    margin-inline-start: var(--spacing-lg);
+}
+
 @media (max-width: 600px) {
     body {
         padding: 1rem;