From 1870898aac738ec86c4a63372926c9366c8bb9f4 Mon Sep 17 00:00:00 2001
From: brodokk <brodokk@brodokk.space>
Date: Sat, 19 Nov 2022 20:21:03 +0100
Subject: [PATCH] initial commit

---
 blueberries.css | 2248 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 2248 insertions(+)
 create mode 100644 blueberries.css

diff --git a/blueberries.css b/blueberries.css
new file mode 100644
index 0000000..673b676
--- /dev/null
+++ b/blueberries.css
@@ -0,0 +1,2248 @@
+:root {
+    /* DEFAULT HUE */
+    /*     --hue: 240deg; */
+    /* AVOCADO HUE */
+    /*     --hue: 90deg; */
+    /* CURRENT HUE */
+    --hue: 90deg;
+}
+
+.navigation-panel a.column-link.column-link--logo:after {
+    content: "🫐";
+    font-size: 14px;
+    vertical-align: top;
+    padding: 3px;
+    opacity: 50%;
+}
+
+.admin-wrapper .sidebar .logo {
+    filter: hue-rotate(calc(var(--hue) - 260deg));
+}
+
+body {
+    /*     background: #191b22; */
+    /*     background: hsl(227, 15%, 12%); */
+    background: hsl(var(--hue), 15%, 12%);
+}
+
+.tabs-bar__wrapper {
+    /*     background: #17191f; */
+    /*     background: hsl(225, 15%, 11%); */
+    background: hsl(var(--hue), 15%, 11%);
+}
+
+body.admin {
+    /*     background: #1f232b; */
+    /*     background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.admin-wrapper .sidebar-wrapper__inner {
+    /*     background: #282c37; */
+    /*     background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.admin-wrapper .sidebar ul ul {
+    /*     background: #1f232b; */
+    /*     background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.compose-panel hr,
+.navigation-panel hr {
+    /*     border-color: #313543; */
+    /*     border-color: hsl(227, 16%, 23%); */
+    border-color: hsl(var(--hue), 16%, 23%);
+}
+
+.getting-started__trends h4 {
+    /*     border-bottom-color: #393f4f; */
+    /*     border-bottom-color: hsl(224, 16%, 27%); */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.focusable:focus {
+    /*     background: #313543; */
+    /*     background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.detailed-status {
+    /*     background: #313543; */
+    /*     background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.detailed-status__action-bar {
+    /*     background: #313543; */
+    /* border-top-color: #393f4f; */
+    /* border-bottom-color: #393f4f; */
+    /*     background: hsl(227, 16%, 23%); */
+    /*     border-top-color: hsl(224, 16%, 27%); */
+    /*     border-bottom-color: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 23%);
+    border-top-color: hsl(var(--hue), 16%, 27%);
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.detailed-status__meta {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.detailed-status__display-name {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.column-header > .column-header__back-button {
+    /*     color: #8c8dff; */
+    /*     color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.button,
+.button.logo-button,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+    /*     background-color: #595aff; */
+    /*         background-color: hsl(240, 100%, 67%); */
+    /*     background-color: hsl(var(--hue), 100%, 67%); */
+    /* Manually changed for readibility */
+    background-color: hsl(var(--hue), 60%, 47%);
+}
+
+.button:active,
+.button:hover,
+.button:focus,
+.button.logo-button:active,
+.button.logo-button:focus,
+.button.logo-button:hover,
+.simple_form .block-button:active,
+.simple_form .block-button:focus,
+.simple_form .block-button:hover,
+.simple_form .button:active,
+.simple_form .button:focus,
+.simple_form .button:hover,
+.simple_form button:active,
+.simple_form button:focus,
+.simple_form button:hover {
+    /*     background-color: #6364ff; */
+    /*         background-color: hsl(240, 100%, 69%); */
+    /*     background-color: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 60%, 69%);
+}
+
+.button.disabled,
+.button:disabled {
+    /*     background-color: #9baec8; */
+    /*         background-color: hsl(215, 29%, 70%); */
+    background-color: hsl(var(--hue), 29%, 70%);
+}
+
+.poll__input {
+    /*     border-color: #9baec8; */
+    /*     border-color: hsl(215, 29%, 70%); */
+    border-color: hsl(var(--hue), 29%, 70%);
+}
+
+.poll__option input[type="text"] {
+    /*     color: #282c37; */
+    /*         color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.poll__option input[type="text"]:focus {
+    /*     border-color: #8c8dff; */
+    /*         border-color: hsl(239, 100%, 77%); */
+    /*     border-color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    border-color: hsl(var(--hue), 70%, 47%);
+}
+
+.compose-form__poll-wrapper .button.button-secondary {
+    /*     color: #606984; */
+    /* border-color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    /*     border-color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+    border-color: hsl(var(--hue), 16%, 45%);
+}
+
+.icon-button.inverted.active {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    /*         color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 70%, 47%);
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active {
+    /*     background: #6364ff; */
+    /*         background: hsl(240, 100%, 69%); */
+    /*         background: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 70%, 39%);
+}
+
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:hover {
+    /*     background: #6364ff; */
+    /*         background: hsl(240, 100%, 69%); */
+    /*         background: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 70%, 39%);
+}
+
+.privacy-dropdown__option.active:hover {
+    /*     background: #7778ff; */
+    /*         background: hsl(240, 100%, 73%); */
+    /*         background: hsl(var(--hue), 100%, 73%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 70%, 43%);
+}
+
+.text-icon-button {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.text-icon-button.active {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.language-dropdown__dropdown__results__item.active {
+    /*     background: #6364ff; */
+    /*         background: hsl(240, 100%, 69%); */
+    background: hsl(var(--hue), 100%, 69%);
+}
+
+.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.language-dropdown__dropdown__results__item.active:hover {
+    /*     background: #7778ff; */
+    /*         background: hsl(240, 100%, 73%); */
+    background: hsl(var(--hue), 100%, 73%);
+}
+
+.language-dropdown__dropdown__results__item {
+    /*     color: #282c37; */
+    /*         color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.language-dropdown__dropdown__results__item__common-name {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.emoji-mart-anchor-selected {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    /*     color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 80%, 37%);
+}
+
+.emoji-mart-anchor-selected:hover {
+    /*     color: #7778ff; */
+    /*     color: hsl(240, 100%, 73%); */
+    /*     color: hsl(var(--hue), 100%, 73%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 80%, 33%);
+}
+
+.emoji-mart-anchors {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.emoji-mart-bar {
+    /*     border-color: #c0cdd9; */
+    /*     border-color: hsl(209, 25%, 80%); */
+    border-color: hsl(var(--hue), 25%, 80%);
+}
+
+.emoji-mart-bar:first-child {
+    /*     background: #d9e1e8; */
+    /*     background: hsl(208, 25%, 88%); */
+    background: hsl(var(--hue), 25%, 88%);
+}
+
+.emoji-mart-anchor-bar {
+    /*     background-color: #8c8dff; */
+    /*         background-color: hsl(239, 100%, 77%); */
+    /*     background-color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    background-color: hsl(var(--hue), 80%, 37%);
+}
+
+.emoji-mart-search input {
+    /*     background: rgba(217,225,232,.3); */
+    /*     color: #282c37; */
+    /*     border-color: #d9e1e8; */
+    /*     background: hsla(208, 25%, 88%, .3); */
+    /*     color: hsl(224, 16%, 19%); */
+    /*     border-color: hsl(208, 25%, 88%); */
+    background: hsla(var(--hue), 25%, 88%, .3);
+    color: hsl(var(--hue), 16%, 19%);
+    border-color: hsl(var(--hue), 25%, 88%);
+}
+
+.emoji-mart-category .emoji-mart-emoji:hover::before {
+    /*     background-color: rgba(217,225,232,.7); */
+    /*     background-color: hsla(208, 25%, 88%, .7); */
+    background-color: hsla(var(--hue), 25%, 88%, .7);
+}
+
+.dismissable-banner {
+    /*     background: #282c37; */
+    /* border-bottom: 1px solid #393f4f; */
+    /*     background: hsl(224, 16%, 19%); */
+    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 19%);
+    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
+}
+
+.empty-column-indicator,
+.follow_requests-unlocked_explanation {
+    /*     color: #606984; */
+    /* background: #282c37; */
+    /*     color: hsl(225, 16%, 45%); */
+    /* background: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 45%);
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.column-header__back-button {
+    /*     background: #313543; */
+    /*     color: #8c8dff; */
+    /*     background: hsl(227, 16%, 23%); */
+    /*     color: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 16%, 23%);
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.column-inline-form {
+    /*     background: #313543; */
+    /*         background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.column-link--transparent.active {
+    /*   color: #8c8dff; */
+    /*       color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.icon-with-badge__badge {
+    /*     background: #6364ff; */
+    /*         background: hsl(240, 100%, 69%); */
+    /*     background: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 80%, 39%);
+}
+
+#logo-symbol-wordmark > path:first-of-type {
+    filter: hue-rotate(calc(var(--hue) - 260deg));
+}
+
+.column-header.active .column-header__icon {
+    /*     color: #8c8dff; */
+    /*     text-shadow: 0 0 10px rgba(140,141,255,.4); */
+    /*         color: hsl(239, 100%, 77%); */
+    /*         text-shadow: 0 0 10px hsla(239, 100%, 77%, .4); */
+    color: hsl(var(--hue), 100%, 77%);
+    text-shadow: 0 0 10px hsla(var(--hue), 100%, 77%, .4);
+}
+
+.load-more {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.trends__item__sparkline path:first-child {
+    /*     fill: rgba(140,141,255,.25) !important; */
+    /*         fill: hsla(239, 100%, 77%, .25) !important; */
+    fill: hsla(var(--hue), 100%, 77%, .25) !important;
+}
+
+.trends__item__sparkline path:last-child {
+    /*     stroke: #aaabff !important; */
+    /*         stroke: hsl(239, 100%, 83%) !important; */
+    stroke: hsl(var(--hue), 100%, 83%) !important;
+}
+
+.icon-button.active {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.dropdown-menu__item button:active,
+.dropdown-menu__item button:focus,
+.dropdown-menu__item button:hover {
+    /*     background: #6364ff; */
+    /*         background: hsl(240, 100%, 69%); */
+    /*     background: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 60%, 39%);
+}
+
+.column-header__wrapper.active::before {
+    /*         background: radial-gradient(ellipse,rgba(99,100,255,.23) 0,rgba(99,100,255,0) 60%); */
+    /*     background: radial-gradient(ellipse,hsla(240, 100%, 69%, .23) 0,hsla(240, 100%, 69%, 0) 60%); */
+    background: radial-gradient(ellipse, hsla(var(--hue), 100%, 69%, .23) 0, hsla(var(--hue), 100%, 69%, 0) 60%);
+}
+
+.column-header__wrapper.active {
+    /*     box-shadow: 0 1px 0 rgba(140,141,255,.3); */
+    /*         box-shadow: 0 1px 0 hsla(239, 100%, 77%, .3); */
+    box-shadow: 0 1px 0 hsla(var(--hue), 100%, 77%, .3);
+}
+
+.reply-indicator__content a.unhandled-link,
+.status__content a.unhandled-link {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.poll__chart.leading {
+    /*   background: #6364ff; */
+    /*       background: hsl(240, 100%, 69%); */
+    background: hsl(var(--hue), 100%, 69%);
+}
+
+.poll__chart {
+    /*     background: #8ba1bf; */
+    /*         background: hsl(215, 29%, 65%); */
+    background: hsl(var(--hue), 29%, 65%);
+}
+
+.column-header,
+.column-header__button {
+    /*     background: #313543; */
+    /*         background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.column-header__button {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.column-header__button:hover {
+    /*     color: #b2c1d5; */
+    /*         color: hsl(214, 29%, 77%); */
+    color: hsl(var(--hue), 29%, 77%);
+}
+
+.load-gap {
+    /*     border-bottom-color: #393f4f; */
+    /*         border-bottom-color: hsl(224, 16%, 27%); */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.load-more:hover {
+    /*     background: #2c313d; */
+    /*         background: hsl(222, 16%, 21%); */
+    background: hsl(var(--hue), 16%, 21%);
+}
+
+.column > .scrollable {
+    /*     background: #282c37; */
+    /*         background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.status {
+    /*     border-bottom-color: #393f4f; */
+    /*         border-bottom-color: hsl(224, 16%, 27%); */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.status__relative-time {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status__display-name {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.icon-button {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.icon-button:focus {
+    /*     background-color: rgba(96,105,135,.3); */
+    /*         background-color: hsla(226, 17%, 45%, .3); */
+    background-color: hsla(var(--hue), 17%, 45%, .3);
+}
+
+.icon-button:active,
+.icon-button:focus,
+.icon-button:hover {
+    /*     color: #707b97; */
+    /*         color: hsl(223, 16%, 52%); */
+    color: hsl(var(--hue), 16%, 52%);
+}
+
+.icon-button.inverted:active,
+.icon-button.inverted:focus,
+.icon-button.inverted:hover {
+    /*     color: #51596f; */
+    /*     background-color: rgba(96,105,132,.15); */
+    /*     color: hsl(224, 16%, 38%); */
+    /*     background-color: hsla(225, 16%, 45%, .15); */
+    color: hsl(var(--hue), 16%, 38%);
+    background-color: hsla(var(--hue), 16%, 45%, .15);
+}
+
+.muted .status__content,
+.muted .status__content a,
+.muted .status__content p,
+.muted .status__display-name strong {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.reply-indicator__content a,
+.status__content a {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.notification__message {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.status__content__spoiler-link {
+    /*     color: #282c37; */
+    /*         color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+    /*     background: #606984; */
+    /*         background: hsl(225, 16%, 45%); */
+    background: hsl(var(--hue), 16%, 45%);
+}
+
+.reply-indicator__content .status__content__spoiler-link:focus,
+.reply-indicator__content .status__content__spoiler-link:hover,
+.status__content .status__content__spoiler-link:focus,
+.status__content .status__content__spoiler-link:hover {
+    /*     background: #707b97; */
+    /*         background: hsl(223, 16%, 52%); */
+    background: hsl(var(--hue), 16%, 52%);
+}
+
+html {
+    /*     scrollbar-color: #313543 rgba(0,0,0,.1); */
+    /*          scrollbar-color: hsl(227, 16%, 23%) rgba(0,0,0,.1); */
+    scrollbar-color: hsl(var(--hue), 16%, 23%) rgba(0, 0, 0, .1);
+}
+
+.account__section-headline a.active::after,
+.account__section-headline button.active::after,
+.notification__filter-bar a.active::after,
+.notification__filter-bar button.active::after {
+    /*     border-color: transparent transparent #282c37; */
+    /*         border-color: transparent transparent hsl(224, 16%, 19%); */
+    border-color: transparent transparent hsl(var(--hue), 16%, 19%);
+}
+
+.account__section-headline,
+.notification__filter-bar {
+    /*     background: #1f232b; */
+    /*     border-bottom-color: #393f4f; */
+    /*         background: hsl(220, 16%, 15%); */
+    /*         border-bottom-color: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 15%);
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.account__section-headline button,
+.notification__filter-bar button {
+    /*     background: #1f232b; */
+    /*         background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.account__section-headline a.active::after,
+.account__section-headline a.active::before,
+.account__section-headline button.active::after,
+.account__section-headline button.active::before,
+.notification__filter-bar a.active::after,
+.notification__filter-bar a.active::before,
+.notification__filter-bar button.active::after,
+.notification__filter-bar button.active::before {
+    /*     border-color: transparent transparent #393f4f; */
+    /*         border-color: transparent transparent hsl(224, 16%, 27%); */
+    border-color: transparent transparent hsl(var(--hue), 16%, 27%);
+}
+
+.account__section-headline a,
+.account__section-headline button,
+.notification__filter-bar a,
+.notification__filter-bar button {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__section-headline a.active,
+.account__section-headline button.active,
+.notification__filter-bar a.active,
+.notification__filter-bar button.active {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.column-link--transparent {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.getting-started__trends h4 {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.trends__item__name a {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.trends__item__name {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status__prepend .status__display-name strong {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status__prepend {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status-card.compact {
+    /*     border-color: #313543; */
+    /*         border-color: hsl(227, 16%, 23%); */
+    border-color: hsl(var(--hue), 16%, 23%);
+}
+
+.status-card__image {
+    /*     background: #393f4f; */
+    /*         background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.status-card {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+a.status-card.compact:hover {
+    /*     background-color: #313543; */
+    /*         background-color: hsl(227, 16%, 23%); */
+    background-color: hsl(var(--hue), 16%, 23%);
+}
+
+a.status-card:hover {
+    /*     background: #393f4f; */
+    /*         background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.status-card__title {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.poll__link {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.poll__footer {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.search__input::placeholder {
+    /*     color: #a8b9cf; */
+    /*         color: hsl(214, 29%, 74%); */
+    color: hsl(var(--hue), 29%, 74%);
+}
+
+.search__input {
+    /*     background: #282c37; */
+    /*     color: #9baec8; */
+    /*     background: hsl(224, 16%, 19%); */
+    /*     color: hsl(215, 29%, 70%); */
+    background: hsl(var(--hue), 16%, 19%);
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.search__input:focus {
+    /*     background: #313543; */
+    /*         background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.search__icon .fa-times-circle {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.search__icon .fa {
+    /*     color: rgb(217, 225, 232); */
+    /*     color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.search-popout h4,
+.search-popout {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.search-popout em {
+    /*     color: #282c37; */
+    /*         color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.navigation-bar a {
+    /*     color: rgb(155, 174, 200); */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.dropdown-menu__item {
+    /*    color: rgb(40, 44, 55);  */
+    /*        color: hsl(224, 16%, 19%);  */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.dropdown-menu {
+    /*     background: #d9e1e8; */
+    /*         background: hsl(208, 25%, 88%); */
+    background: hsl(var(--hue), 25%, 88%);
+}
+
+.dropdown-menu__arrow.bottom {
+    /*     border-bottom-color: #d9e1e8; */
+    /*         border-bottom-color: hsl(208, 25%, 88%); */
+    border-bottom-color: hsl(var(--hue), 25%, 88%);
+}
+
+.dropdown-menu__item a,
+.dropdown-menu__item button {
+    /*     background: #d9e1e8; */
+    /*         background: hsl(208, 25%, 88%); */
+    background: hsl(var(--hue), 25%, 88%);
+}
+
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.dropdown-menu__item button:active,
+.dropdown-menu__item button:focus,
+.dropdown-menu__item button:hover {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.dropdown-menu__separator {
+    /*     border-bottom-color: #c0cdd9; */
+    /*         border-bottom-color: hsl(209, 25%, 80%); */
+    border-bottom-color: hsl(var(--hue), 25%, 80%);
+}
+
+.link-footer p {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.link-footer p a {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.column-back-button {
+    /*     background: #313543; */
+    /*     color: #8c8dff; */
+    /*     background: hsl(227, 16%, 23%); */
+    /*     color: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 16%, 23%);
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.account__header__tabs__buttons .icon-button {
+    /*       border-color: #42485a; */
+    /*           border-color: hsl(225, 15%, 31%); */
+    border-color: hsl(var(--hue), 15%, 31%);
+}
+
+.icon-button:active,
+.icon-button:focus,
+.icon-button:hover {
+    /*     background-color: rgba(96,105,132,.15); */
+    /*         background-color: hsla(225, 16%, 45%, .15); */
+    background-color: hsla(var(--hue), 16%, 45%, .15);
+}
+
+.account__header__bio .account__header__fields a {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.account__header__tabs__name h1 small {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__header__extra__links a {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__header__bio .account__header__fields dt {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.account__header__bio .account__header__fields dd {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__header__bio .account__header__fields dl {
+    /*     border-bottom-color: #313543; */
+    /*         border-bottom-color: hsl(227, 16%, 23%); */
+    border-bottom-color: hsl(var(--hue), 16%, 23%);
+}
+
+.account__header__fields dl {
+    /*     border-bottom-color: #42485a; */
+    /*         border-bottom-color: hsl(225, 15%, 31%); */
+    border-bottom-color: hsl(var(--hue), 15%, 31%);
+}
+
+.account__header__bio .account__header__fields {
+    /*     background: #1f232b; */
+    /*         background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.account__header {
+    /*     background: #313543; */
+    /*         background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.account__header__bar {
+    /*     border-bottom-color: #42485a; */
+    /*         border-bottom-color: hsl(225, 15%, 31%); */
+    border-bottom-color: hsl(var(--hue), 15%, 31%);
+}
+
+.video-player__volume__current {
+    /*     background: #8c8dff; */
+    /*         background: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 100%, 77%);
+}
+
+.video-player__volume__handle {
+    /*     background: #8c8dff; */
+    /*         background: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 100%, 77%);
+}
+
+.video-player__seek__buffer,
+.video-player__seek__progress {
+    /*     background: #8c8dff; */
+    /*         background: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 100%, 77%);
+}
+
+.video-player__seek__handle {
+    /*     background: #8c8dff; */
+    /*         background: hsl(239, 100%, 77%); */
+    background: hsl(var(--hue), 100%, 77%);
+}
+
+.media-modal__overlay .picture-in-picture__footer .icon-button.active {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.media-modal__overlay .picture-in-picture__footer .icon-button.active:active,
+.media-modal__overlay .picture-in-picture__footer .icon-button.active:focus,
+.media-modal__overlay .picture-in-picture__footer .icon-button.active:hover {
+    /*     background: rgba(140,141,255,.15); */
+    /*         background: hsla(239, 100%, 77%, .15); */
+    background: hsla(var(--hue), 100%, 77%, .15);
+}
+
+.media-gallery__item-thumbnail img:not([alt]),
+.audio-player__canvas:not([title]),
+.video-player video:not([title]),
+.media-gallery__gifv video:not([title]),
+.media-gallery__item-thumbnail img[alt=""],
+.audio-player__canvas[title=""],
+.video-player video[title=""],
+.media-gallery__gifv video[title=""] {
+    /*     border-color: #1da1f2; */
+    /*         border-color: hsl(203, 89%, 53%); */
+    border-color: hsl(var(--hue), 89%, 53%);
+}
+
+.account__header__account-note textarea::placeholder {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.account__header__account-note label {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__header__account-note textarea:focus {
+    /*     background: #282c37; */
+    /*         background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.account__header__account-note textarea {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.account__header__bar .avatar .account__avatar {
+    /*     border-color: #313543; */
+    /*         border-color: hsl(227, 16%, 23%); */
+    border-color: hsl(var(--hue), 16%, 23%);
+}
+
+.admin-wrapper .content h4 {
+    /*     color: #9baec8; */
+    /*     border-bottom-color: #393f4f; */
+    /*     color: hsl(215, 29%, 70%); */
+    /*     border-bottom-color: hsl(224, 16%, 27%); */
+    color: hsl(var(--hue), 29%, 70%);
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.simple_form p.hint,
+.simple_form .hint {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.admin-wrapper .sidebar ul a.selected {
+    /*     background: #242731; */
+    /*         background: hsl(226, 15%, 17%); */
+    background: hsl(var(--hue), 15%, 17%);
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
+    /*     background-color: #595aff; */
+    /*         background-color: hsl(240, 100%, 67%); */
+    /*     background-color: hsl(var(--hue), 100%, 67%); */
+    /* Manually changed for readability */
+    background-color: hsl(var(--hue), 70%, 37%);
+}
+
+.admin-wrapper .sidebar ul a {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.admin-wrapper .sidebar ul a:hover {
+    /*     background-color: #1d2028; */
+    /*         background-color: hsl(224, 16%, 14%); */
+    background-color: hsl(var(--hue), 16%, 14%);
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
+    /*     background-color: #6364ff; */
+    /*         background-color: hsl(240, 100%, 69%); */
+    background-color: hsl(var(--hue), 100%, 69%);
+}
+
+.simple_form .hint a {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.admin-wrapper .content .muted-hint a,
+body .muted-hint a {
+    /*     color: #8c8dff; */
+    /*         color: hsl(240, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.admin-wrapper .content .muted-hint,
+body .muted-hint {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.admin-wrapper .content h6 {
+    /*     color: #d9e1e8; */
+    /*         color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.simple_form input[type="datetime-local"]::placeholder,
+.simple_form input[type="email"]::placeholder,
+.simple_form input[type="number"]::placeholder,
+.simple_form input[type="password"]::placeholder,
+.simple_form input[type="text"]::placeholder,
+.simple_form input[type="url"]::placeholder,
+.simple_form textarea::placeholder {
+    /*     color: #a8b9cf; */
+    /*         color: hsl(214, 29%, 74%); */
+    color: hsl(var(--hue), 29%, 74%);
+}
+
+.simple_form input[type="datetime-local"],
+.simple_form input[type="email"],
+.simple_form input[type="number"],
+.simple_form input[type="password"],
+.simple_form input[type="text"],
+.simple_form input[type="url"],
+.simple_form textarea {
+    /*     background: #131419; */
+    /*         background: hsl(230, 14%, 9%); */
+    background: hsl(var(--hue), 14%, 9%);
+}
+
+.simple_form input[type="datetime-local"]:active,
+.simple_form input[type="datetime-local"]:focus,
+.simple_form input[type="email"]:active,
+.simple_form input[type="email"]:focus,
+.simple_form input[type="number"]:active,
+.simple_form input[type="number"]:focus,
+.simple_form input[type="password"]:active,
+.simple_form input[type="password"]:focus,
+.simple_form input[type="text"]:active,
+.simple_form input[type="text"]:focus,
+.simple_form input[type="url"]:active,
+.simple_form input[type="url"]:focus,
+.simple_form textarea:active,
+.simple_form textarea:focus {
+    /*     border-color: #8c8dff; */
+    /* background: #17191f; */
+    /*     border-color: hsl(239, 100%, 77%); */
+    /* background: hsl(225, 15%, 11%); */
+    border-color: hsl(var(--hue), 100%, 77%);
+    background: hsl(var(--hue), 15%, 11%);
+}
+
+.input-copy {
+    /*     background: #131419; */
+    /* border-color: #0a0b0e; */
+    /*     background: hsl(230, 14%, 9%); */
+    /* border-color: hsl(225, 17%, 5%); */
+    background: hsl(var(--hue), 14%, 9%);
+    border-color: hsl(var(--hue), 17%, 5%);
+}
+
+.simple_form .hint code {
+    /*     background: #0e1014; */
+    /*     background: hsl(220, 18%, 7%); */
+    background: hsl(var(--hue), 18%, 7%);
+}
+
+.admin-wrapper .content hr {
+    /*     border-bottom-color: rgba(96,105,132,.6); */
+    /*     border-bottom-color: hsla(225, 16%, 45%, .6); */
+    border-bottom-color: hsla(var(--hue), 16%, 45%, .6);
+}
+
+.card__bar {
+    /*     background: #313543; */
+    /*         background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.card > a:active .card__bar,
+.card > a:focus .card__bar,
+.card > a:hover .card__bar {
+    /*     background: #393f4f; */
+    /*         background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.card__bar .display-name span {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.filters .filter-subset a.selected {
+    /*     color: #8c8dff; */
+    /* border-bottom-color: #6364ff; */
+    /*     color: hsl(239, 100%, 77%); */
+    /* border-bottom-color: hsl(240, 100%, 69%); */
+    color: hsl(var(--hue), 100%, 77%);
+    border-bottom-color: hsl(var(--hue), 100%, 69%);
+}
+
+.filters .filter-subset a {
+    /*     color: #9baec8; */
+    /*     border-bottom-color: #282c37; */
+    /*     color: hsl(215, 29%, 70%); */
+    /*     border-bottom-color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 29%, 70%);
+    border-bottom-color: hsl(var(--hue), 16%, 19%);
+}
+
+a.table-action-link,
+button.table-action-link {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.accounts-table__count small {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account .account__display-name {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.accounts-table .fa.active {
+    /*     color: #8c8dff; */
+    /*         color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.batch-table__toolbar {
+    /*     border-color: #17191f; */
+    /* background: #282c37; */
+    /*     border-color: hsl(225, 15%, 11%); */
+    /* background: hsl(224, 16%, 19%); */
+    border-color: hsl(var(--hue), 15%, 11%);
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.batch-table__row {
+    /*     background: #1f232b; */
+    /*     border-color: #17191f; */
+    /*     background: hsl(220, 16%, 15%); */
+    /*     border-color: hsl(225, 15%, 11%); */
+    background: hsl(var(--hue), 16%, 15%);
+    border-color: hsl(var(--hue), 15%, 11%);
+}
+
+.batch-table__row:nth-child(2n) {
+    /*     background: #282c37; */
+    /*         background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.batch-table__row:hover {
+    /*     background: #242731; */
+    /*         background: hsl(226, 15%, 17%); */
+    background: hsl(var(--hue), 15%, 17%);
+}
+
+.batch-table__row:nth-child(2n):hover {
+    /*     background: #2c313d; */
+    /*         background: hsl(222, 16%, 21%); */
+    background: hsl(var(--hue), 16%, 21%);
+}
+
+.announcements__item__content a.unhandled-link {
+    /*   color: #8c8dff; */
+    /*   color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.announcements {
+    /*   background: #393f4f; */
+    /*   background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.column-header__button.active,
+.column-header__button.active:hover {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.column-header__collapsible-inner {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.reactions-bar__item {
+    /*     background: #42485a; */
+    /*     background: hsl(225, 15%, 31%); */
+    background: hsl(var(--hue), 15%, 31%);
+}
+
+.reactions-bar__item.active {
+    /*     background-color: #494e7b; */
+    /*     background-color: hsl(234, 26%, 38%); */
+    background-color: hsl(var(--hue), 26%, 38%);
+}
+
+.reactions-bar__item.active .reactions-bar__item__count {
+    /*     color: #b5b5ff; */
+    /*     color: hsl(240, 100%, 85%); */
+    color: hsl(var(--hue), 100%, 85%);
+}
+
+.flash-message {
+    /*     background: #393f4f; */
+    /*     color: #9baec8; */
+    /*     background: hsl(224, 16%, 27%); */
+    /*     color: hsl(215, 29%, 70%); */
+    background: hsl(var(--hue), 16%, 27%);
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.form-footer a {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.applications-list__item,
+.filters-list__item {
+    /*     background: #282c37; */
+    /* border-color: #313543; */
+    /*     background: hsl(224, 16%, 19%); */
+    /* border-color: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 19%);
+    border-color: hsl(var(--hue), 16%, 23%);
+}
+
+.announcements-list__item__meta,
+.filters-list__item__meta {
+    /*     color: #606984; */
+    /*         color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.permissions-list__item {
+    /*     border-bottom-color: #313543; */
+    /*         border-bottom-color: hsl(227, 16%, 23%); */
+    border-bottom-color: hsl(var(--hue), 16%, 23%);
+}
+
+.permissions-list__item__text__type {
+    /*     color: #9baec8; */
+    /*         color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.table > tbody > tr:nth-child(2n+1) > td,
+.table > tbody > tr:nth-child(2n+1) > th {
+    /*     background: #282c37; */
+    /*         background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.table td,
+.table th {
+    /*     border-top-color: #282c37; */
+    /*     background: #1f232b; */
+    /*     border-top-color: hsl(224, 16%, 19%); */
+    /*     background: hsl(220, 16%, 15%); */
+    border-top-color: hsl(var(--hue), 16%, 19%);
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.button.button-secondary {
+    /*     color: #9baec8; */
+    /*     border-color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    /*     border-color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+    border-color: hsl(var(--hue), 29%, 70%);
+}
+
+.button.button-secondary:active,
+.button.button-secondary:focus,
+.button.button-secondary:hover {
+    /*     border-color: #a8b9cf; */
+    /*     color: #a8b9cf; */
+    /*     border-color: hsl(214, 29%, 74%); */
+    /*     color: hsl(214, 29%, 74%); */
+    border-color: hsl(var(--hue), 29%, 74%);
+    color: hsl(var(--hue), 29%, 74%);
+}
+
+.button.button-secondary {
+    background: transparent;
+}
+
+.link-button {
+    /*     color: #8c8dff; */
+    /*     color: hsl(239, 100%, 77%); */
+    /*     color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 80%, 47%);
+}
+
+.reply-indicator {
+    /*     background: #9baec8; */
+    /*     background: hsl(215, 29%, 70%); */
+    background: hsl(var(--hue), 29%, 70%);
+}
+
+.icon-button.inverted {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.attachment-list__list a {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.attachment-list.compact .fa {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.compose-form .autosuggest-textarea__suggestions {
+    /*     background: #d9e1e8; */
+    /*     background: hsl(208, 25%, 88%); */
+    background: hsl(var(--hue), 25%, 88%);
+}
+
+.compose-form .autosuggest-textarea__suggestions__item.selected,
+.compose-form .autosuggest-textarea__suggestions__item:active,
+.compose-form .autosuggest-textarea__suggestions__item:focus,
+.compose-form .autosuggest-textarea__suggestions__item:hover {
+    /*     background: #b9c8d5; */
+    /*     background: hsl(208, 25%, 78%); */
+    background: hsl(var(--hue), 25%, 78%);
+}
+
+.compose-form .autosuggest-textarea__suggestions {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.compose-form__sensitive-button .checkbox {
+    /*     border-color: #9baec8; */
+    /*     border-color: hsl(215, 29%, 70%); */
+    border-color: hsl(var(--hue), 29%, 70%);
+}
+
+.link-button:disabled {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.character-counter {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.actions-modal,
+.block-modal,
+.boost-modal,
+.compare-history-modal,
+.confirmation-modal,
+.mute-modal,
+.report-modal {
+    /*     background: #f2f5f7; */
+    /*     color: #282c37; */
+    /*     background: hsl(204, 24%, 96%); */
+    /*     color: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 24%, 96%);
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.muted .poll__chart.leading {
+    /*     background: rgba(99,100,255,.2); */
+    /*     background: hsla(240, 100%, 69%, .2); */
+    background: hsla(var(--hue), 100%, 69%, .2);
+}
+
+.muted .poll__chart {
+    /*     background: rgba(109,137,175,.2); */
+    /*     background: hsla(215, 29%, 56%, .2); */
+    background: hsla(var(--hue), 29%, 56%, .2);
+}
+
+.muted .poll {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.notification.unread::before,
+.status__wrapper.unread::before {
+    /*     border-left-color: #8c8dff; */
+    /*     border-left-color: hsl(239, 100%, 77%); */
+    border-left-color: hsl(var(--hue), 100%, 77%);
+}
+
+.notification__message .fa {
+    /*     color: #8c8dff; */
+    /*     color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.picture-in-picture__footer,
+.picture-in-picture__header {
+    /*     background: #313543; */
+    /*     background: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.picture-in-picture__header .display-name span {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.explore__search-header {
+    /*     background: #1f232b; */
+    /*     background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.explore__search-header .search__input {
+    /*     border-color: #393f4f; */
+    /*     border-color: hsl(224, 16%, 27%); */
+    border-color: hsl(var(--hue), 16%, 27%);
+}
+
+.explore__search-header .search .fa {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.trends__item {
+    /*     border-bottom-color: #393f4f; */
+    /*     border-bottom-color: hsl(224, 16%, 27%); */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.story {
+    /*     border-bottom-color: #393f4f; */
+    /*     border-bottom-color: hsl(224, 16%, 27%); */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.story__details__publisher {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.story__details__shared {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.story:active,
+.story:focus,
+.story:hover {
+    /*     background-color: #313543; */
+    /*     background-color: hsl(227, 16%, 23%); */
+    background-color: hsl(var(--hue), 16%, 23%);
+}
+
+.scrollable .account-card {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.account-card__title .display-name {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account-card__bio a {
+    /*     color: #d9e1e8; */
+    /*     color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.account-card__counters__item small {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.scrollable .account-card__bio::after {
+    /*     background: linear-gradient(270deg,#393f4f,transparent); */
+    /*     background: linear-gradient(270deg,hsl(224, 16%, 27%),transparent); */
+    background: linear-gradient(270deg, hsl(var(--hue), 16%, 27%), transparent);
+}
+
+.column-header__collapsible {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.column-settings__section {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.setting-toggle__label {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.react-toggle--checked .react-toggle-track {
+    /*     background-color: #595aff; */
+    /*     background-color: hsl(240, 100%, 67%); */
+    /*     background-color: hsl(var(--hue), 100%, 67%); */
+    /* Manually changed for readability */
+    background-color: hsl(var(--hue), 70%, 37%);
+}
+
+.react-toggle-thumb {
+    /*     border-color: #282c37; */
+    /*     border-color: hsl(224, 16%, 19%); */
+    border-color: hsl(var(--hue), 16%, 19%);
+}
+
+.react-toggle--checked .react-toggle-thumb {
+    /*     border-color: #6364ff; */
+    /*     border-color: hsl(240, 100%, 69%); */
+    /*     border-color: hsl(var(--hue), 100%, 69%); */
+    /* Manually changed for readability */
+    border-color: hsl(var(--hue), 70%, 39%);
+}
+
+.react-toggle-track {
+    /*     background-color: #282c37; */
+    /*     background-color: hsl(224, 16%, 19%); */
+    background-color: hsl(var(--hue), 16%, 19%);
+}
+
+.dropdown-menu__container__header {
+    /*     border-bottom-color: #c0cdd9; */
+    /*     color: #282c37; */
+    /*     border-bottom-color: hsl(209, 25%, 80%); */
+    /*     color: hsl(224, 16%, 19%); */
+    border-bottom-color: hsl(var(--hue), 25%, 80%);
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.dropdown-menu__item.edited-timestamp__history__item {
+    /*     border-bottom-color: #c0cdd9; */
+    /*     border-bottom-color: hsl(209, 25%, 80%); */
+    border-bottom-color: hsl(var(--hue), 25%, 80%);
+}
+
+.compare-history-modal .report-modal__target {
+    /*     border-bottom-color: #d9e1e8; */
+    /*     border-bottom-color: hsl(208, 25%, 88%); */
+    border-bottom-color: hsl(var(--hue), 25%, 88%);
+}
+
+.compare-history-modal .status__content {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.poll__input.disabled:active,
+.poll__input.disabled:focus,
+.poll__input.disabled:hover {
+    /*     border-color: #606984; */
+    /*     border-color: hsl(225, 16%, 45%); */
+    border-color: hsl(var(--hue), 16%, 45%);
+}
+
+.timeline-hint {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.timeline-hint a {
+    /*     color: #8c8dff; */
+    /*     color: hsl(239, 100%, 77%); */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.upload-progress {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.upload-progress__backdrop {
+    /*     background: #606984; */
+    /*     background: hsl(225, 16%, 45%); */
+    background: hsl(var(--hue), 16%, 45%);
+}
+
+.upload-progress__tracker {
+    /*     background: #6364ff; */
+    /*     background: hsl(240, 100%, 69%); */
+    background: hsl(var(--hue), 80%, 49%);
+}
+
+.block-modal__cancel-button,
+.confirmation-modal__cancel-button,
+.confirmation-modal__secondary-button,
+.mute-modal__cancel-button {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.block-modal__cancel-button:active,
+.block-modal__cancel-button:focus,
+.block-modal__cancel-button:hover,
+.confirmation-modal__cancel-button:active,
+.confirmation-modal__cancel-button:focus,
+.confirmation-modal__cancel-button:hover,
+.confirmation-modal__secondary-button:active,
+.confirmation-modal__secondary-button:focus,
+.confirmation-modal__secondary-button:hover,
+.mute-modal__cancel-button:active,
+.mute-modal__cancel-button:focus,
+.mute-modal__cancel-button:hover {
+    /*     color: #576078; */
+    /*     color: hsl(224, 16%, 41%); */
+    color: hsl(var(--hue), 16%, 41%);
+}
+
+.block-modal__action-bar,
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar {
+    /*     background: #d9e1e8; */
+    /*     background: hsl(208, 25%, 88%); */
+    background: hsl(var(--hue), 25%, 88%);
+}
+
+.loading-bar {
+    /*     background-color: #8c8dff; */
+    /*     background-color: hsl(239, 100%, 77%); */
+    /*     background-color: hsl(var(--hue), 100%, 77%); */
+    /* Manually changed for readability */
+    background-color: hsl(var(--hue), 70%, 57%);
+}
+
+.circular-progress {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status-card {
+    /*     border-color: #393f4f; */
+    /*     border-color: hsl(224, 16%, 27%); */
+    border-color: hsl(var(--hue), 16%, 27%);
+}
+
+.status-card__description {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    /*     color: hsl(var(--hue), 29%, 70%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 10%, 60%);
+}
+
+.navigation-bar strong {
+    /*     color: #d9e1e8; */
+    /*     color: hsl(208, 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.column-header__setting-btn:focus,
+.column-header__setting-btn:hover {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    /*     color: hsl(var(--hue), 29%, 70%); */
+    /* Manually changed for readability */
+    color: hsl(var(--hue), 19%, 90%);
+}
+
+.focusable:focus .detailed-status,
+.focusable:focus .detailed-status__action-bar {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.reply-indicator__content {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.reply-indicator__display-name {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.compose-form .autosuggest-textarea__textarea::placeholder,
+.compose-form .spoiler-input__input::placeholder {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
+/*     color: #51596f; */
+/*     background-color: rgba(96,105,132,.15); */
+/*     color: hsl(224, 16%, 38%); */
+/*     background-color: hsla(225, 16%, 45%, .15); */
+    color: hsl(var(--hue), 16%, 38%);
+    background-color: hsla(var(--hue), 16%, 45%, .15);
+}
+
+.compose-panel .compose-form__autosuggest-wrapper {
+    background: none;
+}
+
+.compose-form .compose-form__warning {
+/*     color: #282c37; */
+/*     background: #9baec8; */
+/*     color: hsl(224, 16%, 19%); */
+/*     background: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 16%, 19%);
+    background: hsl(var(--hue), 29%, 70%);
+}
+
+.compose-form .compose-form__warning a {
+/*     color: #606984; */
+/*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+
+
+/* brodokk's patches */
+
+.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
+    /*     color: #d9e1e8; */
+    /*     color: hsl(var(--hue), 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
+    /*     color: #d9e1e8; */
+    /*     color: hsl(var(--hue), 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.compose-form .compose-form__buttons-wrapper {
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 15%, 13%);
+}
+
+.drawer__inner.darker {
+    /*     background: #282c37; */
+    /*         background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.search-results__header {
+    /*     background: #2c313d; */
+    /*         background: hsl(222, 16%, 21%); */
+    background: hsl(var(--hue), 16%, 21%);
+}
+
+.search-results__header {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.search-results__section h5 {
+    /*     background: #1f232b; */
+    /*     background: hsl(220, 16%, 15%); */
+    background: hsl(var(--hue), 16%, 15%);
+}
+
+.search-results__section h5 {
+    /* border-bottom: 1px solid #393f4f; */
+    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
+    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
+}
+
+.search-results__section h5 {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.status__content__read-more-button {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.public-layout .header, .public-layout .public-account-bio, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.activity-stream .entry, .hero-widget__text, .directory__tag > a, .directory__tag > div{
+    /*     color: #282c37; */
+    /*     color: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 15%, 13%);
+}
+
+.public-layout .header .nav-link, .hero-widget__text p, .trends-widget h4, .public-layout .footer h4, .public-layout .public-account-header__tabs__tabs .counter, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .placeholder-widget, .directory__tag h4 .fa, .endorsements-widget h4 {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.directory__tag h4 small {
+    /*     color: #9baec8; */
+    color: hsl(var(--hue), 20%, 70%);
+}
+
+.hero-widget__text a, .trends__item__current {
+    /*     color: #d9e1e8; */
+    /*     color: hsl(var(--hue), 25%, 88%); */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.public-layout .footer .grid .column-2 h4 a, .public-layout .footer, .public-layout .footer .legal-xs a, .public-layout .footer ul a {
+    /*     color: #737d99; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 20%, 52%);
+}
+
+.public-layout .footer .brand svg {
+    /*     color: #7f88a2; */
+    /*     color: hsl(215, 29%, 70%); */
+    fill: hsl(var(--hue), 20%, 52%);
+}
+
+.public-layout .public-account-header__bar::before {
+    /*     border-color: #313543; */
+    /*     border-color: hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.public-layout .public-account-header__bar .avatar img {
+    /*     background: #17191f; */
+    /*      border: 4px solid #313543; */
+    /*     background: hsl(225, 15%, 11%); */
+    /*      border: 4px solid hsl(227, 16%, 23%); */
+    background: hsl(var(--hue), 15%, 11%);
+    border: 4px solid hsl(var(--hue), 16%, 23%);  
+}
+
+.public-layout .public-account-header__tabs__tabs .counter {
+    /*     border-right: 1px solid #313543; */
+    /*     border-right: 1px solidhsl(227, 16%, 23%); */
+    border-right: 1px solid hsl(var(--hue), 16%, 23%);
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+    /* border-bottom: 4px solid #2b90d9; */
+    border-bottom: 4px solid hsl(var(--hue), 60%, 50%);
+}
+
+.public-layout .public-account-header__tabs__tabs .counter::after {
+      /* border-bottom: 4px solid #9baec8; */
+      border-bottom: 4px solid hsl(var(--hue), 29%, 70%);
+}
+
+.placeholder-widget {
+    /* border: 2px dashed #606984; */
+    /* border: 2px dashedhsl(225, 16%, 45%); */
+    border: 2px dashed hsl(var(--hue), 16%, 45%);
+}
+
+.notice-widget a, .placeholder-widget a {
+    /* color: #2b90d9; */
+    color: hsl(var(--hue), 60%, 50%);
+}
+
+.public-layout .public-account-bio .account__header__fields a {
+    /* color: #2b90d9; */
+    color: hsl(var(--hue), 50%, 50%);
+}
+
+.public-layout .header .nav-button {
+    /*     background-color: #595aff; */
+    background-color: hsl(var(--hue), 29%, 47%);
+}
+
+.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
+    /*     background-color: #535b72; */
+    background-color: hsl(var(--hue), 40%, 47%);
+}
+
+.account__header__fields dd {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.account__header__fields {
+/*     border-color: #42485a currentcolor; */
+    border-color: hsl(var(--hue), 15%, 31%) currentcolor;
+}
+
+.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
+/*     background: #42485a; */
+    background: hsl(var(--hue), 15%, 31%);
+}
+
+.icon-button.disabled {
+/*     color: #444b5d; */
+    color: hsl(var(--hue), 16%, 32%);
+}
+
+.sign-in-banner p {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.button.button-tertiary {
+/*     color: #8c8dff; */
+/*     border-color: #8c8dff; */
+    color: hsl(var(--hue), 100%, 77%);
+    border-color: hsl(var(--hue), 100%, 77%);
+}
+
+.button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
+/*     background: #6364ff; */
+/*     background: hsl(var(--hue), 100%, 69%); */
+    
+    /* Manually changed for readability */
+    background: hsl(var(--hue), 60%, 49%);
+}
+
+.server-banner h4 {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.server-banner__number-label {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.server-banner__introduction {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.about__meta h4 {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.about__meta {
+/*     background: #313543; */
+    background: hsl(var(--hue), 16%, 23%);
+}
+
+.about__meta__divider {
+/*     border-color: #393f4f; */
+    border-color: hsl(var(--hue), 16%, 27%);
+}
+
+.about__section__title {
+/*     background: #313543; */
+/*     color: #8c8dff; */
+    background: hsl(var(--hue), 16%, 23%);
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.about__section__body {
+/*     border-color: #313543; */
+    border-color: hsl(var(--hue), 16%, 23%);
+}
+
+.prose {
+/*     color: #d9e1e8; */
+    color: hsl(var(--hue), 25%, 88%);
+}
+
+.prose ul > li::before {
+/*     background-color: #9baec8; */
+    background-color: hsl(var(--hue), 29%, 70%);
+}
+
+.prose a {
+/*     color: #8c8dff; */
+    color: hsl(var(--hue), 100%, 77%);
+}
+
+.prose hr {
+/*     border-top-color: #313543; */
+    border-top-color: hsl(var(--hue), 16%, 23%);
+}
+
+.about__header p {
+/*     color: #9baec8; */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.about__footer {
+/*     color: #606984; */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.rules-list li::before {
+/*     background: #8c8dff; */
+/*     color: #282c37; */
+    background: hsl(var(--hue), 100%, 77%);
+    color: hsl(var(--hue), 16%, 19%);
+}
+
+.rules-list li {
+/*     border-bottom-color: #393f4f; */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.account {
+/*     border-bottom-color: #393f4f; */
+    border-bottom-color: hsl(var(--hue), 16%, 27%);
+}
+
+.page-header {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.page-header p {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+
+
+/* Hue rotate for complex backgrounds */
+
+.simple_form select {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+button.icon-button.disabled:hover i.fa-retweet,
+button.icon-button.disabled i.fa-retweet {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+button.icon-button i.fa-retweet {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+button.icon-button:hover i.fa-retweet {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+
+
+/* Advanced Web Interface */
+.drawer__header {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.drawer__header a:hover {
+    /*     background: #2e3340; */
+    /*     background: hsl(223, 16%, 22%); */
+    background: hsl(var(--hue), 16%, 22%);
+}
+
+.drawer__tab {
+    /*     color: #9baec8; */
+    /*     color: hsl(215, 29%, 70%); */
+    color: hsl(var(--hue), 29%, 70%);
+}
+
+.drawer__inner {
+    /*     background: #444b5d; */
+    /*     background: hsl(223, 16%, 32%); */
+    background: hsl(var(--hue), 16%, 32%);
+}
+
+.drawer__inner__mastodon {
+    /*     background-color: #444b5d; */
+    /*     background-color: hsl(223, 16%, 32%); */
+    background-color: hsl(var(--hue), 16%, 32%);
+}
+
+.drawer__inner__mastodon {
+    /*     background-color: #444b5d; */
+    /*     background-color: hsl(223, 16%, 32%); */
+    /*     background-color: hsl(240deg, 16%, 32%); */
+    /* Strangely, I need to remove the space between the - and 120deg */
+    background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
+}
+
+.drawer__inner__mastodon {
+    filter: hue-rotate(calc(var(--hue) - 240deg));
+}
+
+.drawer__inner__mastodon > img {
+    filter: hue-rotate(calc(var(--hue) - 300deg));
+}
+
+.flex-spacer,
+.getting-started,
+.getting-started__wrapper {
+    /*     background: #282c37; */
+    /*     background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.column-subheading {
+    /*     color: #606984; */
+    /*     color: hsl(225, 16%, 45%); */
+    color: hsl(var(--hue), 16%, 45%);
+}
+
+.column-link__badge,
+.column-subheading {
+    /*     background: #282c37; */
+    /*     background: hsl(224, 16%, 19%); */
+    background: hsl(var(--hue), 16%, 19%);
+}
+
+.getting-started__wrapper .column-link {
+    /*     background: #393f4f; */
+    /*     background: hsl(224, 16%, 27%); */
+    background: hsl(var(--hue), 16%, 27%);
+}
+
+.getting-started__wrapper .column-link:active,
+.getting-started__wrapper .column-link:focus,
+.getting-started__wrapper .column-link:hover {
+    /*     background: #404657; */
+    /*     background: hsl(224, 15%, 30%); */
+    background: hsl(var(--hue), 15%, 30%);
+}
+
+
+
+@media screen and (max-width: 1174px) {
+    .ui__header {
+        /*         background: #282c37; */
+        /*         border-bottom-color: #393f4f; */
+        /*         background: hsl(224, 16%, 19%); */
+        /*         border-bottom-color: hsl(224, 16%, 27%); */
+        background: hsl(var(--hue), 16%, 19%);
+        border-bottom-color: hsl(var(--hue), 16%, 27%);
+    }
+
+    .columns-area__panels__pane--navigational .navigation-panel {
+        /*         background: #282c37; */
+        /*         border-left-color: #393f4f; */
+        /*         background: hsl(224, 16%, 19%); */
+        /*         border-left-color: hsl(224, 16%, 27%); */
+        background: hsl(var(--hue), 16%, 19%);
+        border-left-color: hsl(var(--hue), 16%, 27%);
+    }
+}