added spooky mode (aka dark mode)

_sass/includes/header.scss

@@ -43,6 +43,10 @@ header.page-header {
     margin: $size-128 0;
     // background-color: $bg;
     display: inline-block;
+
+    @include touch {
+      margin: $size-128 0 $size-64 0;
+    }
   }
 }
 
@@ -55,6 +59,12 @@ header.page-header {
     &:visited {
       font-style: normal;
     }
+
+    @include darkMode {
+      h1 {
+        color: $white;
+      }
+    }
   }
 
   &.hidden {

_sass/layout.scss

@@ -1,16 +1,37 @@
 body {
   background-color: $bg;
   background-image: url('../img/bg/bg-2.png');
+  transition: background-color 0.5s ease-in-out;
+  background-position: 3px 5px;
   background-repeat-x: no-repeat;
   background-repeat-y: repeat;
   background-size: cover;
   background-attachment: fixed;
   display: flex;
   flex-direction: column;
+  background-size: 100%;
 
   @include touch {
     background-attachment: scroll;
   }
+
+  @include darkMode {
+    background-color: $black;
+    &::after {
+      content: '';
+      background-image: url('../img/bg/bg-el-light.png');
+      opacity: 1;
+      background-position: 0 0;
+      background-repeat-x: no-repeat;
+      background-repeat-y: repeat;
+      background-size: 100%;
+      background-attachment: fixed;
+      height: 100vh;
+      width: 100vw;
+      position: fixed;
+      pointer-events: none;
+    }
+  }
 }
 
 .page-content {
@@ -32,15 +53,6 @@ footer.page-footer {
   flex-shrink: 0;
 }
 
-.rf-logo path {
-  fill: transparent;
-  stroke-width: 1;
-
-  @include touch {
-    stroke-width: 1.5;
-  }
-}
-
 .textbox {
   @include textbox;
 }

_sass/layouts/default.scss

@@ -58,4 +58,12 @@ h2 {
   a {
     color: $text;
   }
+
+  @include darkMode {
+    color: $white;
+
+    a {
+      color: $white;
+    }
+  }
 }

_sass/utils/responsive.scss

@@ -50,3 +50,9 @@
     @content;
   }
 }
+
+@mixin darkMode() {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}