diff --git a/src/_mixins.scss b/src/_mixins.scss
index 388208b..9ba2055 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,80 +1,100 @@
-@import "./variables";
-
-@mixin flexList {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-@mixin cardGeneric {
-    border-radius: 5px;
-    overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
-    transition: transform 0.25s, box-shadow 0.25s;
-    color: $textColor;
-    text-decoration: none;
-    margin: 20px;
-    background: $background;
-
-    &:hover,
-    &:active,
-    &:focus {
-        transform: scale(1.05);
-        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-            -1px 11px 33px -10px rgba($accentColor, 0.75);
-    }
-}
-
-@mixin buttonBasic {
-    display: block;
-    padding: 10px;
-    text-align: center;
-    background: $accentColor;
-    color: white;
-    text-decoration: none;
-    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
-    transition: box-shadow 0.25s;
-
-    &:hover,
-    &:active,
-    &:hover {
-        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
-    }
-}
-
-@mixin button {
-    @include buttonBasic;
-    border-radius: 5px;
-}
-
-@mixin homeBanner {
-    background: lighten($background, 1);
-    cursor: pointer;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-
-    img {
-        height: 50px;
-    }
-
-    > div {
-        display: flex;
-        height: 100%;
-        padding: 20px !important;
-        line-height: 50px;
-        font-size: 1.7em;
-        color: white;
-
-        > span {
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        > i {
-            display: inline-flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-    }
-}
+@import "./variables";
+
+@mixin flexList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+@mixin cardGeneric {
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
+    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, color 0.25s;
+    color: $textColor;
+    text-decoration: none;
+    margin: 20px;
+    background: $background;
+
+    &:hover,
+    &:active,
+    &:focus {
+        transform: scale(1.05);
+        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
+            -1px 11px 33px -10px rgba($accentColor, 0.75);
+    }
+
+    @media(prefers-color-scheme: light) {
+        box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+
+        background: $lightBackground;
+        color: $lightTextColor;
+
+        &:hover,
+        &:active,
+        &:focus {
+            transform: scale(1.05);
+            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+                -1px 11px 33px -10px rgba($accentColor, 0.75);
+        }
+    }
+}
+
+@mixin buttonBasic {
+    display: block;
+    padding: 10px;
+    text-align: center;
+    background: $accentColor;
+    color: white;
+    text-decoration: none;
+    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
+    transition: box-shadow 0.25s;
+
+    &:hover,
+    &:active,
+    &:hover {
+        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
+    }
+}
+
+@mixin button {
+    @include buttonBasic;
+    border-radius: 5px;
+}
+
+@mixin homeBanner {
+    background: lighten($background, 1);
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: darken($accentColor, 1);
+    }
+
+    img {
+        height: 50px;
+    }
+
+    > div {
+        display: flex;
+        height: 100%;
+        padding: 20px !important;
+        line-height: 50px;
+        font-size: 1.7em;
+        color: white;
+
+        > span {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        > i {
+            display: inline-flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+}
diff --git a/src/_variables.scss b/src/_variables.scss
index bfe481d..33c9a01 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,7 +1,9 @@
-$layoutWidth: 1200px;
-$accentColor: #e5502b;
-$background: #070707;
-$textColor: white;
-$layoutPadding: 20px;
-
-$mainFont: "Anonymous Pro", monospace;
+$layoutWidth: 1200px;
+$accentColor: #e5502b;
+$background: #070707;
+$lightBackground: #fff;
+$textColor: white;
+$lightTextColor: black;
+$layoutPadding: 20px;
+
+$mainFont: "Anonymous Pro", monospace;
diff --git a/src/components/navigation.module.scss b/src/components/navigation.module.scss
index fc462c8..4bc7c5a 100644
--- a/src/components/navigation.module.scss
+++ b/src/components/navigation.module.scss
@@ -1,59 +1,75 @@
-@import "../variables";
-@import "../mixins";
-
-.topBar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    background: rgba($background, 0.95);
-    backdrop-filter: blur(5px);
-    z-index: 999;
-    transition: background 0.25s;
-
-    @supports (backdrop-filter: blur(5px)) {
-        background: rgba($background, 0.9);
-    }
-
-    .topBarInner {
-        display: flex;
-        width: 100%;
-        max-width: $layoutWidth;
-        margin: auto;
-
-        > :first-child {
-            padding-left: $layoutPadding;
-        }
-
-        > :last-child {
-            padding-right: $layoutPadding;
-        }
-
-        a {
-            display: block;
-            padding: 10px $layoutPadding;
-            color: white;
-            text-decoration: none;
-            border-top: 2px solid transparent;
-
-            &:hover {
-                border-color: rgba(255, 255, 255, 0.25);
-            }
-
-            &.active {
-                border-color: white;
-            }
-        }
-    }
-}
-
-.homeBar.homeBarTransparent {
-    background: transparent;
-    backdrop-filter: blur(0);
-}
-
-.flexSpacer {
-    flex-grow: 1;
-    text-align: center;
-}
+@import "../variables";
+@import "../mixins";
+
+.topBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    background: rgba($background, 0.95);
+    color: $textColor;
+    backdrop-filter: blur(5px);
+    z-index: 999;
+    transition: background-color .25s, color .25s;
+
+    @supports (backdrop-filter: blur(5px)) {
+        background: rgba($background, 0.9);
+    }
+
+    @media(prefers-color-scheme: light) {
+        background: rgba($lightBackground, 0.95);
+        color: $lightTextColor;
+
+        @supports (backdrop-filter: blur(5px)) {
+            background: rgba($lightBackground, 0.9);
+        }
+    }
+
+    .topBarInner {
+        display: flex;
+        width: 100%;
+        max-width: $layoutWidth;
+        margin: auto;
+
+        > :first-child {
+            padding-left: $layoutPadding;
+        }
+
+        > :last-child {
+            padding-right: $layoutPadding;
+        }
+
+        a {
+            display: block;
+            padding: 10px $layoutPadding;
+            color: inherit;
+            text-decoration: none;
+            border-top: 2px solid transparent;
+
+            &:hover {
+                border-color: rgba(255, 255, 255, 0.25);
+            }
+
+            &.active {
+                border-color: white;
+                transition: border-color .25s;
+
+                @media(prefers-color-scheme: light) {
+                    border-color: $accentColor;
+                }
+            }
+        }
+    }
+}
+
+.homeBar.homeBarTransparent {
+    background: transparent;
+    color: $textColor;
+    backdrop-filter: blur(0);
+}
+
+.flexSpacer {
+    flex-grow: 1;
+    text-align: center;
+}
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index dbe7fc6..6416e10 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -1,73 +1,85 @@
-@import "../variables";
-
-* {
-    box-sizing: border-box;
-}
-
-body,
-html,
-#___gatsby,
-#gatsby-focus-wrapper {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    min-height: 100vh;
-    font-family: $mainFont;
-}
-
-#gatsby-focus-wrapper {
-    background: $background;
-    color: $textColor;
-    display: flex;
-    flex-direction: column;
-}
-
-footer {
-    background: darken($background, 1);
-    width: 100%;
-    color: white;
-    padding: 5px;
-    text-align: center;
-
-    a {
-        color: white;
-        text-decoration: underline dotted currentColor;
-    }
-}
-
-#content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.flexSpacer {
-    flex-grow: 1;
-    text-align: center;
-}
-
-section > div:not(.profile),
-section > article,
-.section > div:not(.profile),
-.section > article {
-    max-width: $layoutWidth;
-    width: 100%;
-    padding: 39px 20px;
-    margin: 0 auto;
-}
-
-article {
-    p {
-        text-align: justify;
-    }
-
-    a {
-        color: $accentColor;
-        text-decoration: underline dotted currentColor;
-        text-decoration-skip: none;
-    }
-}
-
-h1 {
-    font-size: 2em;
-}
+@import "../variables";
+
+* {
+    box-sizing: border-box;
+}
+
+body,
+html,
+#___gatsby,
+#gatsby-focus-wrapper {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    min-height: 100vh;
+    font-family: $mainFont;
+}
+
+#gatsby-focus-wrapper {
+    background: $background;
+    color: $textColor;
+    display: flex;
+    flex-direction: column;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: $lightBackground;
+        color: $lightTextColor;
+    }
+}
+
+footer {
+    background: darken($background, 1);
+    width: 100%;
+    color: white;
+    padding: 5px;
+    text-align: center;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: darken($lightBackground, 1);
+        color: $lightTextColor;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline dotted currentColor;
+    }
+}
+
+#content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.flexSpacer {
+    flex-grow: 1;
+    text-align: center;
+}
+
+section > div:not(.profile),
+section > article,
+.section > div:not(.profile),
+.section > article {
+    max-width: $layoutWidth;
+    width: 100%;
+    padding: 39px 20px;
+    margin: 0 auto;
+}
+
+article {
+    p {
+        text-align: justify;
+    }
+
+    a {
+        color: $accentColor;
+        text-decoration: underline dotted currentColor;
+        text-decoration-skip: none;
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss
index b03a67e..00e98d6 100644
--- a/src/pages/friends.module.scss
+++ b/src/pages/friends.module.scss
@@ -1,62 +1,68 @@
-@import "../variables";
-@import "../mixins";
-
-.friendsList {
-    @include flexList;
-
-    .friendProfile {
-        @include cardGeneric;
-        display: flex;
-        flex-direction: column;
-        width: 300px;
-        flex-shrink: 0;
-
-        .friendImage {
-            width: 100%;
-            height: 300px;
-            background-position: center;
-            background-size: cover;
-            display: flex;
-            padding: 10px;
-            flex-direction: column-reverse;
-            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-
-            .friendName {
-                font-size: 2em;
-                margin-top: -5px;
-            }
-
-            .friendTitle {
-                margin-top: auto;
-            }
-        }
-
-        .friendBio {
-            padding: 15px;
-            flex-grow: 1;
-            text-align: justify;
-            display: block;
-            padding-bottom: 0;
-        }
-
-        .contactLinks {
-            padding: 15px;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-
-            .contactLink {
-                transition: text-decoration 0.5s;
-                text-decoration: underline dotted rgba(0, 0, 0, 0);
-                padding: 6px 0 6px 25px;
-                color: $textColor;
-
-                > i {
-                    color: $accentColor;
-                    margin-left: -25px;
-                    margin-right: 5px;
-                }
-            }
-        }
-    }
-}
+@import "../variables";
+@import "../mixins";
+
+.friendsList {
+    @include flexList;
+
+    .friendProfile {
+        @include cardGeneric;
+        display: flex;
+        flex-direction: column;
+        width: 300px;
+        flex-shrink: 0;
+
+        .friendImage {
+            width: 100%;
+            height: 300px;
+            background-position: center;
+            background-size: cover;
+            display: flex;
+            padding: 10px;
+            flex-direction: column-reverse;
+            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            color: white;
+
+            .friendName {
+                font-size: 2em;
+                margin-top: -5px;
+            }
+
+            .friendTitle {
+                margin-top: auto;
+            }
+        }
+
+        .friendBio {
+            padding: 15px;
+            flex-grow: 1;
+            text-align: justify;
+            display: block;
+            padding-bottom: 0;
+        }
+
+        .contactLinks {
+            padding: 15px;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+
+            .contactLink {
+                transition: text-decoration 0.5s;
+                text-decoration: underline dotted rgba(0, 0, 0, 0);
+                padding: 6px 0 6px 25px;
+                color: $textColor;
+                transition: color .25s;
+
+                @media(prefers-color-scheme: light) {
+                    color: $lightTextColor;
+                }
+
+                > i {
+                    color: $accentColor;
+                    margin-left: -25px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 171f4ec..973841e 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,184 +1,189 @@
-@import "../variables";
-@import "../mixins";
-
-.heroSection {
-    width: 100%;
-    height: 600px;
-    overflow: hidden;
-
-    .heroSectionBg,
-    .heroSectionBgOver {
-        position: absolute;
-        width: 100%;
-        max-width: unset;
-        height: 600px;
-        padding: 0;
-
-        @media (pointer: coarse), (pointer: none) {
-            height: 700px;
-        }
-    }
-
-    .heroSectionBg {
-        /*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
-            radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
-
-        background: linear-gradient(45deg, #000850 0%, #000320 100%),
-            radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
-            linear-gradient(225deg, #ff7a00 0%, #000000 100%),
-            linear-gradient(
-                135deg,
-                #cdffeb 10%,
-                #cdffeb 35%,
-                #009f9d 35%,
-                #009f9d 60%,
-                #07456f 60%,
-                #07456f 67%,
-                #0f0a3c 67%,
-                #0f0a3c 100%
-            );
-        background-blend-mode: screen, overlay, hard-light, normal;
-    }
-
-    .heroSectionBgOver {
-        background: linear-gradient(to bottom, transparent 80%, $background);
-    }
-
-    @media (pointer: coarse), (pointer: none) {
-        height: 700px;
-    }
-
-    .profile {
-        position: relative;
-        left: 50%;
-        width: calc(90% - 40px);
-        max-width: 600px;
-        max-height: 400px;
-        transform: translate(-50%, 0%);
-        top: 100px;
-
-        .hello {
-            font-weight: 100;
-            opacity: 0.75;
-            display: block;
-            margin-bottom: -5px;
-        }
-
-        .name {
-            font-weight: 100;
-            font-size: 2em;
-            display: block;
-        }
-
-        .description {
-            font-weight: 100;
-            display: block;
-        }
-
-        .contactLinks {
-            margin-top: 20px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .contactLink {
-            transition: text-decoration 0.5s;
-            text-decoration: underline dotted rgba(0, 0, 0, 0);
-            padding: 6px 0 6px 25px;
-            color: $textColor;
-
-            @media (pointer: coarse), (pointer: none) {
-                padding-top: 15px;
-                padding-bottom: 15px;
-            }
-        }
-
-        .contactLink:hover,
-        .contactLink:active {
-            text-decoration: underline dotted rgba(0, 0, 0, 0.5);
-        }
-
-        .contactLink > i {
-            color: $accentColor;
-            margin-left: -25px;
-            margin-right: 5px;
-        }
-
-        .profileCard {
-            width: calc(100% - 40px);
-            height: calc(100% - 20px);
-            transform: translate(40px, 20px);
-            border-radius: 5px;
-            padding: 20px 20px 20px 230px;
-            color: $textColor;
-        }
-
-        .profileImage,
-        .profileImageDummy {
-            display: inline-block;
-            width: 250px;
-            height: 350px;
-            border-radius: 5px;
-            position: absolute;
-            z-index: 100;
-            background-color: #1c1c1c;
-            background-size: cover;
-            background-position: center;
-            transition: transform 0.25s;
-        }
-
-        .profileImage {
-            z-index: 20;
-            box-shadow: -1px 11px 33px -10px #e5502b4b;
-            clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
-        }
-
-        .profileImageDummy {
-            z-index: 10;
-            background: $accentColor;
-            opacity: 0.2;
-            clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
-        }
-
-        @media (max-width: 590px) {
-            .profileImage,
-            .profileImageDummy {
-                display: none;
-            }
-
-            .profileCard {
-                padding: 20px 20px 20px 20px;
-                transform: translate(20px, 20px);
-            }
-        }
-    }
-}
-
-.amazonAlexaSection,
-.donationSection,
-.hireMeSection {
-    @include homeBanner;
-}
-
-.creditSection {
-    @include homeBanner;
-
-    > div {
-        padding: 15px !important;
-        line-height: 15px;
-        font-size: 1.2em;
-        color: white;
-
-        > span > i {
-            line-height: 15px !important;
-        }
-    }
-}
-
-.seeMoreButton {
-    @include button;
-    width: fit-content;
-    margin: 0 auto;
-    margin-top: 40px;
-    padding: 10px 20px;
-}
+@import "../variables";
+@import "../mixins";
+
+.heroSection {
+    width: 100%;
+    height: 600px;
+    overflow: hidden;
+
+    .heroSectionBg,
+    .heroSectionBgOver {
+        position: absolute;
+        width: 100%;
+        max-width: unset;
+        height: 600px;
+        padding: 0;
+
+        @media (pointer: coarse), (pointer: none) {
+            height: 700px;
+        }
+    }
+
+    .heroSectionBg {
+        /*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
+            radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
+
+        background: linear-gradient(45deg, #000850 0%, #000320 100%),
+            radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
+            linear-gradient(225deg, #ff7a00 0%, #000000 100%),
+            linear-gradient(
+                135deg,
+                #cdffeb 10%,
+                #cdffeb 35%,
+                #009f9d 35%,
+                #009f9d 60%,
+                #07456f 60%,
+                #07456f 67%,
+                #0f0a3c 67%,
+                #0f0a3c 100%
+            );
+        background-blend-mode: screen, overlay, hard-light, normal;
+    }
+
+    .heroSectionBgOver {
+        background: linear-gradient(to bottom, transparent 80%, $background);
+        transition: background-image .25s;
+
+        @media(prefers-color-scheme: light) {
+            background: linear-gradient(to bottom, transparent 90%, $lightBackground);
+        }
+    }
+
+    @media (pointer: coarse), (pointer: none) {
+        height: 700px;
+    }
+
+    .profile {
+        position: relative;
+        left: 50%;
+        width: calc(90% - 40px);
+        max-width: 600px;
+        max-height: 400px;
+        transform: translate(-50%, 0%);
+        top: 100px;
+
+        .hello {
+            font-weight: 100;
+            opacity: 0.75;
+            display: block;
+            margin-bottom: -5px;
+        }
+
+        .name {
+            font-weight: 100;
+            font-size: 2em;
+            display: block;
+        }
+
+        .description {
+            font-weight: 100;
+            display: block;
+        }
+
+        .contactLinks {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .contactLink {
+            transition: text-decoration 0.5s;
+            text-decoration: underline dotted rgba(0, 0, 0, 0);
+            padding: 6px 0 6px 25px;
+            color: $textColor;
+
+            @media (pointer: coarse), (pointer: none) {
+                padding-top: 15px;
+                padding-bottom: 15px;
+            }
+        }
+
+        .contactLink:hover,
+        .contactLink:active {
+            text-decoration: underline dotted rgba(0, 0, 0, 0.5);
+        }
+
+        .contactLink > i {
+            color: $accentColor;
+            margin-left: -25px;
+            margin-right: 5px;
+        }
+
+        .profileCard {
+            width: calc(100% - 40px);
+            height: calc(100% - 20px);
+            transform: translate(40px, 20px);
+            border-radius: 5px;
+            padding: 20px 20px 20px 230px;
+            color: $textColor;
+        }
+
+        .profileImage,
+        .profileImageDummy {
+            display: inline-block;
+            width: 250px;
+            height: 350px;
+            border-radius: 5px;
+            position: absolute;
+            z-index: 100;
+            background-color: #1c1c1c;
+            background-size: cover;
+            background-position: center;
+            transition: transform 0.25s;
+        }
+
+        .profileImage {
+            z-index: 20;
+            box-shadow: -1px 11px 33px -10px #e5502b4b;
+            clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
+        }
+
+        .profileImageDummy {
+            z-index: 10;
+            background: $accentColor;
+            opacity: 0.2;
+            clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
+        }
+
+        @media (max-width: 590px) {
+            .profileImage,
+            .profileImageDummy {
+                display: none;
+            }
+
+            .profileCard {
+                padding: 20px 20px 20px 20px;
+                transform: translate(20px, 20px);
+            }
+        }
+    }
+}
+
+.amazonAlexaSection,
+.donationSection,
+.hireMeSection {
+    @include homeBanner;
+}
+
+.creditSection {
+    @include homeBanner;
+
+    > div {
+        padding: 15px !important;
+        line-height: 15px;
+        font-size: 1.2em;
+        color: white;
+
+        > span > i {
+            line-height: 15px !important;
+        }
+    }
+}
+
+.seeMoreButton {
+    @include button;
+    width: fit-content;
+    margin: 0 auto;
+    margin-top: 40px;
+    padding: 10px 20px;
+}
diff --git a/src/pages/projects.module.scss b/src/pages/projects.module.scss
index d5b61f6..7a15941 100644
--- a/src/pages/projects.module.scss
+++ b/src/pages/projects.module.scss
@@ -1,89 +1,90 @@
-@import "../variables";
-@import "../mixins";
-
-.projectList {
-    @include flexList;
-    margin: 15px 0;
-}
-
-.projectCard {
-    @include cardGeneric;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    width: 250px;
-    flex-shrink: 0;
-
-    .projectCardActivityIndicator {
-        position: absolute;
-        margin: 12px;
-        padding: 2px 5px;
-        border-radius: 3px;
-
-        &.activityIndicatorGreen {
-            background: #26de81;
-        }
-
-        &.activityIndicatorYellow {
-            background: #f7b731;
-        }
-
-        &.activityIndicatorRed {
-            background: #fc5c65;
-        }
-
-        &.activityIndicatorBlue {
-            background: #45aaf2;
-        }
-    }
-
-    .projectCardImage {
-        width: 100%;
-        height: 250px;
-        background-position: center;
-        background-size: cover;
-        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-    }
-
-    .projectCardMeta {
-        padding: 10px;
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        padding: 10px;
-        height: 100%;
-        background: linear-gradient(to bottom, transparent, black);
-    }
-
-    .projectCardTitle {
-        display: block;
-        font-size: 1.5em;
-        margin-top: auto;
-    }
-
-    .projectCardCTA {
-        display: block;
-    }
-
-    .projectCardCTA a {
-        @include buttonBasic;
-    }
-
-    .projectCardCTAContainer {
-        display: flex;
-    }
-
-    @media (max-width: 900px) {
-        .projectCardCTAContainer {
-            flex-direction: column;
-        }
-
-        .projectCardCTA:nth-child(2) {
-            border-left: none;
-        }
-    }
-
-    .projectCardCTAContainer > * {
-        flex-grow: 1;
-    }
-}
+@import "../variables";
+@import "../mixins";
+
+.projectList {
+    @include flexList;
+    margin: 15px 0;
+}
+
+.projectCard {
+    @include cardGeneric;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 250px;
+    flex-shrink: 0;
+
+    .projectCardActivityIndicator {
+        position: absolute;
+        margin: 12px;
+        padding: 2px 5px;
+        border-radius: 3px;
+
+        &.activityIndicatorGreen {
+            background: #26de81;
+        }
+
+        &.activityIndicatorYellow {
+            background: #f7b731;
+        }
+
+        &.activityIndicatorRed {
+            background: #fc5c65;
+        }
+
+        &.activityIndicatorBlue {
+            background: #45aaf2;
+        }
+    }
+
+    .projectCardImage {
+        width: 100%;
+        height: 250px;
+        background-position: center;
+        background-size: cover;
+        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+        color: white;
+    }
+
+    .projectCardMeta {
+        padding: 10px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        height: 100%;
+        background: linear-gradient(to bottom, transparent, black);
+    }
+
+    .projectCardTitle {
+        display: block;
+        font-size: 1.5em;
+        margin-top: auto;
+    }
+
+    .projectCardCTA {
+        display: block;
+    }
+
+    .projectCardCTA a {
+        @include buttonBasic;
+    }
+
+    .projectCardCTAContainer {
+        display: flex;
+    }
+
+    @media (max-width: 900px) {
+        .projectCardCTAContainer {
+            flex-direction: column;
+        }
+
+        .projectCardCTA:nth-child(2) {
+            border-left: none;
+        }
+    }
+
+    .projectCardCTAContainer > * {
+        flex-grow: 1;
+    }
+}
diff --git a/src/pages/social.module.scss b/src/pages/social.module.scss
index c971eda..76e7c55 100644
--- a/src/pages/social.module.scss
+++ b/src/pages/social.module.scss
@@ -1,32 +1,33 @@
-@import "../variables";
-@import "../mixins";
-
-.socialList {
-    @include flexList;
-
-    .socialCard {
-        @include cardGeneric;
-        display: flex;
-        flex-direction: column;
-
-        .socialImage {
-            width: 300px;
-            height: 300px;
-            background-position: center;
-            background-size: cover;
-            display: flex;
-            padding: 10px;
-            flex-direction: column-reverse;
-            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-
-            .socialName {
-                font-size: 2em;
-                margin-top: -5px;
-            }
-
-            .socialUsername {
-                margin-top: auto;
-            }
-        }
-    }
-}
+@import "../variables";
+@import "../mixins";
+
+.socialList {
+    @include flexList;
+
+    .socialCard {
+        @include cardGeneric;
+        display: flex;
+        flex-direction: column;
+
+        .socialImage {
+            width: 300px;
+            height: 300px;
+            background-position: center;
+            background-size: cover;
+            display: flex;
+            padding: 10px;
+            flex-direction: column-reverse;
+            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            color: white;
+
+            .socialName {
+                font-size: 2em;
+                margin-top: -5px;
+            }
+
+            .socialUsername {
+                margin-top: auto;
+            }
+        }
+    }
+}
diff --git a/src/templates/project.module.scss b/src/templates/project.module.scss
index 2cb8795..1339a37 100644
--- a/src/templates/project.module.scss
+++ b/src/templates/project.module.scss
@@ -1,99 +1,105 @@
-@import "../variables";
-
-.projectHeader {
-    > div {
-        padding-bottom: 0 !important;
-    }
-
-    .headerBackground {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 400px;
-        background-position: center;
-        background-size: cover;
-    }
-
-    header {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 400px;
-        background: linear-gradient(
-            to bottom,
-            rgba($background, 0.95),
-            rgba($background, 0.25) 20%,
-            rgba($background, 0.35) 80%,
-            rgba($background, 1) 100%
-        );
-
-        .headerInner {
-            max-width: $layoutWidth;
-            width: 100%;
-            height: 100%;
-            margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            text-shadow: 0 0 10px black, 0 0 20px black;
-            padding: 10px 20px;
-
-            * {
-                margin: 0;
-                color: white;
-                font-size: 1.25em;
-            }
-
-            h1 {
-                font-size: 2.2em;
-                margin-top: auto;
-            }
-        }
-    }
-
-    .headerPlaceholder {
-        width: 100%;
-        height: 400px;
-    }
-}
-
-.projectAbout,
-.projectLinks {
-    &:nth-of-type(2) {
-        > div,
-        > article {
-            padding-top: 20px;
-        }
-    }
-}
-
-.projectAbout {
-    background: #060606;
-    color: white;
-}
-
-.projectLinks {
-    .linkList {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    a {
-        display: inline-block;
-        border: thin solid rgb(200, 200, 200);
-        border-radius: 5px;
-        padding: 10px 15px;
-        margin: 5px;
-        color: $textColor;
-        text-decoration-skip: none;
-        text-decoration: underline dotted currentColor;
-
-        i.fab,
-        i.fas,
-        i.fa,
-        i.far,
-        i.fal {
-            display: inline;
-        }
-    }
-}
+@import "../variables";
+
+.projectHeader {
+    > div {
+        padding-bottom: 0 !important;
+    }
+
+    .headerBackground {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 400px;
+        background-position: center;
+        background-size: cover;
+    }
+
+    header {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 400px;
+        background: linear-gradient(
+            to bottom,
+            rgba($background, 0.95),
+            rgba($background, 0.25) 20%,
+            rgba($background, 0.35) 80%,
+            rgba($background, 1) 100%
+        );
+
+        .headerInner {
+            max-width: $layoutWidth;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            text-shadow: 0 0 10px black, 0 0 20px black;
+            padding: 10px 20px;
+
+            * {
+                margin: 0;
+                color: white;
+                font-size: 1.25em;
+            }
+
+            h1 {
+                font-size: 2.2em;
+                margin-top: auto;
+            }
+        }
+    }
+
+    .headerPlaceholder {
+        width: 100%;
+        height: 400px;
+    }
+}
+
+.projectAbout,
+.projectLinks {
+    &:nth-of-type(2) {
+        > div,
+        > article {
+            padding-top: 20px;
+        }
+    }
+}
+
+.projectAbout {
+    background: #060606;
+    color: white;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: $lightBackground;
+        color: $lightTextColor;
+    }
+}
+
+.projectLinks {
+    .linkList {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    a {
+        display: inline-block;
+        border: thin solid rgb(200, 200, 200);
+        border-radius: 5px;
+        padding: 10px 15px;
+        margin: 5px;
+        color: inherit;
+        text-decoration-skip: none;
+        text-decoration: underline dotted currentColor;
+
+        i.fab,
+        i.fas,
+        i.fa,
+        i.far,
+        i.fal {
+            display: inline;
+        }
+    }
+}