update

src/styles/_colors.scss

@@ -43,7 +43,7 @@
 @media (prefers-color-scheme: dark) {
   $backgroundColor: #202030;
   $textColor: #cdcdcd;
-  $linkColor: lightskyblue;
+  $linkColor: #A8BFD6;
   $linkHoverColor: #202749;
 
   :root {

src/styles/global.scss

@@ -8,8 +8,14 @@
     "Consolas", monospace;
 }
 
+html {}
+
 body {
-  background-color: var(--background-color);
+  background: radial-gradient(circle at center top, var(--background-color), black),
+    radial-gradient(circle at center bottom, #200d0d, black),
+    radial-gradient(circle at center left, #0d2020, black),
+    radial-gradient(circle at center right, #0d200d, black);
+  background-blend-mode: difference;
   color: var(--text-color);
 
   margin: auto;
@@ -31,7 +37,13 @@ code::selection {
 
 a {
   color: var(--link-color);
-  text-decoration: none;
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+
+  // text-decoration: none;
   padding: 2px 0;
   border-radius: 2px;
 
@@ -50,7 +62,7 @@ code {
   // color: $code-color;
 }
 
-pre > code,
+pre>code,
 pre.Agda {
   color: var(--text-color);
   display: block;
@@ -84,7 +96,7 @@ body {
 }
 
 code,
-pre > code {
+pre>code {
   font-size: 0.95rem;
   letter-spacing: -0.035rem;
 }
@@ -98,7 +110,7 @@ pre > code {
   justify-content: center;
 }
 
-.flex-wrapper > main {
+.flex-wrapper>main {
   min-width: 0;
   max-width: variables.$breakpoint;
   flex-grow: 1;
@@ -116,6 +128,7 @@ pre > code {
 @media screen and (max-width: variables.$breakpoint) {
   .flex-wrapper {
     flex-direction: column;
+
     .container {
       padding: 5px 20px;
     }
@@ -125,13 +138,14 @@ pre > code {
 @media screen and (min-width: variables.$breakpoint) {
   .flex-wrapper {
     flex-direction: row;
+
     .container {
       padding: 32px 40px 5px 40px;
     }
   }
 
-  .flex-wrapper > main.pad {
+  .flex-wrapper>main.pad {
     padding-left: 30px;
     padding-right: 30px;
   }
-}
+}