Simplify & improve CSS

src/page/background/background.scss

@@ -2,34 +2,29 @@
 
 #background {
   transform-style: preserve-3d;
-  z-index: -1;
-  position: absolute;
-}
-
-.blob {
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: 1000px;
-  transition: background-color var(--transition-time);
-
-  &:nth-child(odd) {
-    background-color: #fff9e0;
-  }
-
-  &:nth-child(even) {
-    background-color: #ffd6d6;
-  }
 
   @media print {
-    & {
-      display: none;
+    display: none;
+  }
+
+  > div {
+    position: absolute;
+    width: 140px;
+    border-radius: 1000px;
+    transition: background-color var(--transition-time);
+
+    &:nth-child(odd) {
+      background-color: #fff9e0;
+    }
+
+    &:nth-child(even) {
+      background-color: #ffd6d6;
     }
   }
 }
 
 @include in-dark-mode {
-  .blob {
+  #background > div {
     background-color: #2c477a;
   }
 }

src/page/footer/footer.scss

@@ -4,19 +4,19 @@
   text-align: center;
   margin-top: var(--large-margin);
 
-  h2 {
+  > h2 {
     @include title-font();
   }
 
-  .links {
+  > .links {
     margin: var(--normal-margin) 0 0 var(--normal-margin);
     display: inline-block;
   }
 
-  aside {
+  > aside {
     margin: var(--large-margin) auto var(--line-height) auto;
 
-    p {
+    > p {
       @include special-text-font();
       color: var(--normal-text-color);
       opacity: 0.75;

src/page/header/header.scss

@@ -13,6 +13,10 @@
     color: var(--accent-color);
   }
 
+  :focus:not(:hover) {
+    outline: var(--very-light-text-color) solid 3px !important;
+  }
+
   h1,
   .placeholder {
     @include title-font();
@@ -27,7 +31,6 @@
   }
 
   p {
-    @include main-font();
     text-align: justify;
   }
 

src/page/header/theme-switcher/theme-switcher.scss

@@ -54,7 +54,7 @@
     &:before {
       transform: translateY(-50%) translateX(calc(3 * #{$margin} + #{$icon-size}));
 
-      animation: shine 3s linear alternate infinite;
+      animation: shine 2s linear alternate infinite;
       background-color: var(--sun-color);
       @keyframes shine {
         from {
@@ -63,7 +63,7 @@
         }
 
         to {
-          filter: brightness(1.1);
+          filter: brightness(1.2);
           box-shadow: 0 0 15px 2px var(--sun-color);
         }
       }

src/page/image-viewer/image-viewer.scss

@@ -32,8 +32,8 @@
     right: 0;
     top: 0;
 
-    svg {
-      stroke: var(--normal-text-color);
+    &:focus:not(:hover) {
+      outline: var(--very-light-text-color) solid 3px !important;
     }
   }
 }

src/page/timeline/timeline-element/timeline-element.scss

@@ -168,13 +168,11 @@
             @include square(var(--icon-size));
 
             svg {
-              stroke: var(--normal-text-color);
               transition: stroke var(--transition-time), transform var(--transition-time);
             }
           }
 
           p {
-            @include main-font();
             padding-bottom: var(--small-margin);
             font-size: 0.9rem;
             font-style: italic;

src/style/mixins.scss

@@ -18,16 +18,6 @@ $breakpoint-width: 925px !default;
   }
 }
 
-html[animations='off'] {
-  &,
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
 @mixin image-button($icon-size) {
   display: block;
   box-sizing: content-box;

src/styles.scss

@@ -14,6 +14,16 @@
   }
 }
 
+html[animations='off'] {
+  &,
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 html {
   height: 100%;
 
@@ -44,6 +54,10 @@ body {
   }
 }
 
+svg {
+  stroke: var(--normal-text-color);
+}
+
 p {
   @include main-font();
 }
@@ -51,6 +65,7 @@ p {
 noscript {
   @include square(100%);
   @include center-children();
+  @include sub-title-font();
 }
 
 .start-button {
@@ -115,7 +130,7 @@ iframe {
   outline: none;
 
   &:not(:hover) {
-    outline: var(--accent-color) solid 2px;
+    outline: var(--accent-color) solid 3px;
   }
 }