From 4da247b3caffa1017e204c997cc0e2aef9613702 Mon Sep 17 00:00:00 2001
From: brodokk <brodokk@brodokk.space>
Date: Sun, 28 May 2023 14:07:55 +0000
Subject: [PATCH] Add metadata directly in userstyle

---
 blueberries.css | 6103 ++++++++++++++++++++++++-----------------------
 1 file changed, 3058 insertions(+), 3045 deletions(-)

diff --git a/blueberries.css b/blueberries.css
index 188ec3a..edcdcf6 100644
--- a/blueberries.css
+++ b/blueberries.css
@@ -1,3056 +1,3069 @@
-/* Blueberries Mastodon UI user theme (c) CC-BY by HugoBDesigner, brodokk */
-:root {
-    /* DEFAULT HUE */
-    /* --hue: 240deg; */
-    /* AVOCADO HUE */
-    /* --hue: 90deg; */
-    /* BLUEBERRIES HUE */
-    /* --hue: 300deg; */
-    /* CURRENT HUE */
-    --hue: 300deg;
-}
-
-.navigation-panel a.column-link.column-link--logo:after {
-    content: "🫐";
-    font-size: 14px;
-    vertical-align: top;
-    padding: 3px;
-    opacity: 50%;
-}
-
-/* start brodokk fixes */
-
-.getting-started, .getting-started__footer p, .getting-started__footer p a {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.nothing-here {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.admin-wrapper .content-heading {
-    /* border-bottom: 1px solid #393f4f; */
-    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
-    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
-}
-
-.getting-started__footer a, .getting-started__trends .trends__item__current, .setting-text, .icon-button.disabled, .account__header__bio .account__header__joined, .nothing-here {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.setting-text {
-    /* border-bottom: 2px solid #9baec8; */
-    /* border-bottom: 2px solid hsl(215, 29%, 70%); */
-    border-bottom: 2px solid hsl(var(--hue), 29%, 70%);
-}
-
-.account__header__bar {
-    /* border-color: #313543; */
-    /* border-color: hsl(227, 16%, 23%); */
-    background: hsl(var(--hue), 16%, 23%);
-}
-
-.account__header__bio .account__header__fields {
-    /*   border-top: 1px solid #42485a; */
-    /*   border-top: 1px solid hsl(225, 15%, 31%); */
-    border-top: 1px solid hsl(var(--hue), 15%, 31%);
-}
-
-.batch-table .nothing-here {
-    /* background: #17191f; */
-    /* background: hsl(225, 15%, 11%); */
-    background: hsl(var(--hue), 15%, 11%);
-}
-
-/* Add suport on instance information when connected */
-
-.rules-list li {
-    /*    border-bottom: 1px solid #393f4f; */
-    /*    border-bottom: 1px solid hsl(224, 16%, 27%); */
-    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
-}
-
-.about__domain-blocks {
-    /* background: #1f232b; */
-    /* border: 1px solid #313543; */
-    /* background: hsl(220, 16%, 15%); */
-    /* border: 1px solid hsl(227, 16%, 23%); */
-    background: hsl(var(--hue), 16%, 15%);
-    border: 1px solid hsl(var(--hue), 16%, 23%);
-}
-
-.about__domain-blocks__domain {
-    /* color: #9baec8; */
-    /* border-bottom: 1px solid #313543; */
-    /* color: hsl(215, 29%, 70%); */
-    /* border-bottom: 1px solid hsl(227, 16%, 23%); */
-    color: hsl(var(--hue), 29%, 70%);
-    border-bottom: 1px solid hsl(var(--hue), 16%, 23%);
-}
-
-.about__domain-blocks__domain h6 {
-    /* color: #d9e1e8; */
-    /* color: hsl(var(--hue), 25%, 88%); */
-    color: hsl(var(--hue), 25%, 88%);
-}
-
-.about__domain-blocks__domain:nth-child(2n) {
-    /* background: #242731; */
-    /* background: hsl(226, 15%, 17%); */
-    background: hsl(var(--hue), 15%, 17%);
-}
-
-/* search fixes */
-
-.search-results__info {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.account {
-    /* border-bottom: 1px solid #393f4f; */
-    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
-    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
-}
-
-/* Add fixes for profile directory */
-
-.account-card__header img {
-    /* background: #17191f; */
-    /* background: hsl(225, 15%, 11%); */
-    background: hsl(var(--hue), 15%, 11%);
-}
-
-/* start brodokk bonus fixes */
-
-.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%);
-}
-
-/* Add support page not found when connected */
-
-.regeneration-indicator {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.regeneration-indicator {
-    /* color: #282c37; */
-    /* color: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.regeneration-indicator__label strong {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.error-column {
-    /*    background: rgb(40, 44, 55);  */
-    /*    background: hsl(224, 16%, 19%);  */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.error-column__message {
-    /* color: rgb(155, 174, 200); */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-/* Graze toot fixes */
-
-.graze-toot-container.site {
-    /* border: 1px solid #606984; */
-    /* background: #383d4c; */
-    /* border: 1px solid hsl(225, 16%, 45%); */
-    /* background: hsl(225, 15%, 26%); */
-    border: 1px solid hsl(var(--hue), 16%, 45%);
-    background: hsl(var(--hue), 15%, 26%);;
-}
-
-.graze-toot-container.site h2 {
-    /* color: rgba(255, 255, 255, 0.6); */
-    /* color: hsla(255, 0%, 100%, 0.6); */
-    color: hsla(var(--hue), 0%, 100%, 0.6);
-}
-
-/* You might be interested in fixes */
-
-.trends__header {
-    /* color: #606984; */
-    /* background: #2c313d; */
-    /* border-bottom: 1px solid #1f232b; */
-    /* color:  hsl(225, 16%, 45%); */
-    /* background: hsl(222, 16%, 21%); */
-    /* border-bottom: 1px solid hsl(220, 16%, 15%); */
-    color: hsl(var(--hue), 16%, 45%);
-    background: hsl(var(--hue), 16%, 21%);
-    border-bottom: 1px solid #1f232b;
-    border-bottom: 1px solid hsl(var(--hue), 16%, 15%);
-}
-
-/* glitsoc fixes */
-
-.notification.unread::before, .status.unread::before {
-    /* -webkit-border-start: 4px solid #8c8dff; */
-    /* -webkit-border-start: 4px solid hsl(239, 100%, 77%); */
-    -webkit-border-start: 4px solid hsl(var(--hue), 100%, 77%);
-    /* border-inline-start: 4px solid #8c8dff; */
-    /* border-inline-start: 4px solid hsl(239, 100%, 77%); */
-    border-inline-start: 4px solid hsl(var(--hue), 100%, 77%);
-}
-
-.drawer__header > * {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.pillbar-button:not([disabled]):focus, .pillbar-button:not([disabled]):hover {
-    /* background-color: #131419; */
-    /* background-color: hsl(230, 14%, 9%); */
-    background-color: hsl(var(--hue), 14%, 9%);
-}
-
-.pillbar-button {
-    /* background-color: #282c37; */
-    /* background-color: hsl(224, 16%, 19%); */
-    background-color: hsl(var(--hue), 16%, 19%);
-}
-
-.pillbar-button:not([disabled]).active {
-    /* 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%);
-}
-
-.pillbar-button:not([disabled]).active:focus, .pillbar-button:not([disabled]).active:hover {
-    /* background-color: #6364ff; */
-    /* background-color: hsl(240, 100%, 69%); */
-    /* background-color: hsl(var(--hue), 100%, 69%); */
-    /* Manually changed for readability */
-    background-color: hsl(var(--hue), 60%, 69%);
-}
-
-.mbstobon-0 .drawer__inner__mastodon {
-    /* background-color: #444b5d; */
-    /* background-color: hsl(223, 16%, 32%); */
-    /* background-color: hsl(240deg, 16%, 32%); */
-    background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
-}
-
-.compose-form .autosuggest-input label .autosuggest-textarea__textarea,
-.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea {
-    /* color: #d9e1e8; */
-    /* background: #282c37; */
-    /* color: hsl(208, 25%, 88%); */
-    /* background: hsl(224, 16%, 19%); */
-    color: hsl(var(--hue), 25%, 88%);
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.compose-form .autosuggest-input label .autosuggest-textarea__textarea::placeholder,
-.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea::placeholder {
-    /* color: #d9e1e8; */
-    /* color: hsl(var(--hue), 25%, 88%); */
-    color: hsl(var(--hue), 25%, 88%);
-}
-
-/* end brodokk bonus fixes */
-
-.admin-wrapper .sidebar .logo {
-    filter: hue-rotate(calc(var(--hue) - 260deg));
-}
-
-.media-modal__page-dot:first-of-type.active:not(:only-child):before {
-    content: "";
-    display: block;
-    border-radius: .5rem;
-    width: .4rem;
-    height: 1.5rem;
-    background-color: rgba(255, 255, 255, 0.7);
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    margin-top: calc(-50vh + 15%);
-    margin-left: calc(-50vw + 50%);
-    transform: translateY(-50%) translateX(calc(30px - 1rem));
-}
-
-.media-modal__page-dot:last-of-type.active:not(:only-child):before {
-    content: "";
-    display: block;
-    border-radius: .5rem;
-    width: .4rem;
-    height: 1.5rem;
-    background-color: rgba(255, 255, 255, 0.7);
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    margin-top: calc(-50vh + 15%);
-    margin-left: calc(50vw + 50%);
-    transform: translateY(-50%) translateX(calc(-30px + .5rem));
-}
-
-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%);
-}
-
-.getting-started__trends h4 a {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.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; */
-    /* background: #fff; */
-    /* border: 1px solid #dbdbdb; */
-    /* color: hsl(224, 16%, 19%); */
-    /* backgroud: hsl(0, 0%, 100%); */
-    /* border: 1px solid hsl(0, 0%, 86%);*/
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 70.8%, 82.5%);
-    background: hsl(var(--hue), 25.4%, 27.8%);
-    border: 1px solid hsl(var(--hue), 16%, 45%);
-}
-
-.poll__input:active,
-.poll__input:focus,
-.poll__input:hover {
-    /* border-color: #acd6c1; */
-    /* border-color: hsl(150, 34%, 76%); */
-    border-color: hsl(var(--hue), 34%, 76%);
-}
-
-.compose-form__poll-wrapper .icon-button.disabled {
-    /* color: #dbdbdb; */
-    /* color: hsl(0, 0%, 86%); */
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.poll__cancel .icon-button {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    /* Manually changed for readability */
-    color: hsl(var(--hue),  80%, 88.2%);
-}
-
-.poll__cancel .icon-button:active,
-.poll__cancel .icon-button:focus,
-.poll__cancel .icon-button:hover {
-    /* color: #707b97; */
-    /* color: hsl(223, 16%, 52%); */
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 62.6%, 82.2%);
-}
-
-.compose-form__poll-wrapper .poll__footer button:focus,
-.compose-form__poll-wrapper .poll__footer select: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 select {
-    /* color: #282c37; */
-    /* background-color: #fff; */
-    /* border: 1px solid #dbdbdb; */
-    /* color: hsl(224, 16%, 19%); */
-    /* backgroud-color: hsl(0, 0%, 100%); */
-    /* border: 1px solid hsl(0, 0%, 86%);*/
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 70.8%, 82.5%);
-    background-color: hsl(var(--hue), 25.4%, 27.8%);
-    border: 1px solid hsl(var(--hue), 16%, 45%);
-}
-
-.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%); */
-    /* Manually changed for readability */
-    color: hsl(300, 46%, 75.3%);
-}
-
-.language-dropdown__dropdown__results__item__common-name {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.emoji-picker-dropdown__menu {
-    /* background: #fff; */
-    /* background: hsl(0, 0%, 100%); */
-    /* Manually changed for readability */
-    background: hsl(var(--hue), 15.9%, 21%);
-    /*box-shadow: 4px 4px 6px rgba(0,0,0,.4);*/
-}
-
-.emoji-mart-scroll {
-    /* background: #fff; */
-    /* background: hsl(0, 0%, 100%); */
-    /* Manually changed for readability */
-    background: hsl(var(--hue), 15.9%, 21%);
-}
-
-.emoji-mart-category-label span {
-    /* background: #fff; */
-    /* background: hsl(0, 0%, 100%); */
-    /* Manually changed for readability */
-    background: hsl(var(--hue), 15.9%, 21%);
-}
-
-.emoji-mart {
-    /* color: #282c37; */
-    /* color: hsl(224, 16%, 19%); */
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 45.8%, 76.9%);
-}
-
-.emoji-mart-search {
-    /* background: #fff; */
-    /* background: hsl(0, 0%, 100%); */
-    /* Manually changed for readability */
-    background: hsl(var(--hue), 15.9%, 21%);
-}
-
-.emoji-picker-dropdown__modifiers__menu {
-    /* background: #fff; */
-    /* background: hsl(0, 0%, 100%); */
-    /* Manually changed for readability */
-    background: hsl(var(--hue), 15.9%, 21%);
-}
-
-.emoji-picker-dropdown__modifiers__menu button:active,
-.emoji-picker-dropdown__modifiers__menu button:focus,
-.emoji-picker-dropdown__modifiers__menu button:hover {
-    /* background: rgba(217,225,232,.4); */
-    /* background: hsla(208, 25%, 88%, 0.4); */
-    /* Manually changed for readability */
-    background: hsla(var(--hue), 25%, 88%, 0.4);
-}
-
-.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__link:active,
-.poll__link:focus {
-    /* background-color: rgba(96,105,132,.1); */
-    /* background-color: hsla(225, 16%, 45%, .1); */
-    background-color: hsla(var(--hue), 16%, 45%, .1);
-}
-
-.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__icon .fa-times-circle:hover {
-    /* color: #707b97; */
-    /* color: hsl(223, 16%, 52%); */
-    color: hsl(var(--hue), 16%, 52%);
-}
-
-.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; */
-    /* background: #17191f; */
-    /* border-color: hsl(227, 16%, 23%); */
-    /* background: hsl(225, 15%, 11%); */
-    border-color: hsl(var(--hue), 16%, 23%);
-    background: hsl(var(--hue), 15%, 11%);
-}
-
-.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; */
-    /* border-color: #0a0b0e; */
-    /* color: hsl(214, 29%, 74%); */
-    /* border-color: hsl(225, 17%, 5%); */
-    color: hsl(var(--hue), 29%, 74%);
-    border-color: hsl(var(--hue), 17%, 5%);
-}
-
-.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%);
-}
-
-.timeline-hint a:active,
-.timeline-hint a:focus,
-.timeline-hint a:hover {
-    /* color: #a0a1ff; */
-    /* color: hsl(239, 100%, 81%); */
-    color: hsl(var(--hue), 100%, 81%);
-}
-
-.column-title p {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.account__header__image {
-    /* background: #1f232b; */
-    /* background: hsl(220, 16%, 15%); */
-    background: hsl(var(--hue), 16%, 15%);
-}
-
-.reactions-bar__item__count {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.reactions-bar__item:active,
-.reactions-bar__item:focus,
-.reactions-bar__item:hover {
-    /* background: #4a5266; */
-    /* background: hsl(223, 16%, 35%); */
-    background: hsl(var(--hue), 16%, 35%);
-}
-
-.announcements__pagination {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.interaction-modal__icon {
-    /* color: #8c8dff; */
-    /* color: hsl(239, 100%, 77%); */
-    color: hsl(var(--hue), 100%, 77%);
-}
-
-.interaction-modal__lead p,
-.interaction-modal__choices__choice p {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.copypaste input {
-    /* background: #17191f; */
-    /* border-color: #8c8dff; */
-    /* color: #9baec8; */
-    /* background: hsl(225, 15%, 11%); */
-    /* border-color: hsl(239, 100%, 77%); */
-    /* color: hsl(215, 29%, 70%); */
-    background: hsl(var(--hue), 15%, 11%);
-    border-color: hsl(var(--hue), 100%, 77%);
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.copypaste input:focus {
-    /* background: #1f232b; */
-    /* background: hsl(220, 16%, 15%); */
-    background: hsl(var(--hue), 16%, 15%);
-}
-
-.interaction-modal {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.compare-history-modal .status__content a {
-    /* color: #8c8dff; */
-    /* color: hsl(239, 100%, 77%); */
-    /* color: hsl(var(--hue), 100%, 77%); */
-    /* Manually changed for readability */
-    color: hsl(var(--hue), 70%, 47%);
-}
-
-.filter-form {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.radio-button__input {
-    /* border-color: #9baec8; */
-    /* border-color: hsl(215, 29%, 70%); */
-    border-color: hsl(var(--hue), 29%, 70%);
-}
-
-.radio-button__input.checked {
-    /* border-color: #7778ff; */
-    /* background: #7778ff; */
-    /* border-color: hsl(240, 100%, 73%); */
-    /* background: hsl(240, 100%, 73%); */
-    border-color: hsl(var(--hue), 100%, 73%);
-    background: hsl(var(--hue), 100%, 73%);
-}
-
-.getting-started__trends .trends__item__current {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.keyboard-shortcuts kbd {
-    /* background-color: #393f4f; */
-    /* border-color: #1f232b; */
-    /* background-color: hsl(224, 16%, 27%); */
-    /* border-color: hsl(220, 16%, 15%); */
-    background-color: hsl(var(--hue), 16%, 27%);
-    border-color: hsl(var(--hue), 16%, 15%);
-}
-
-.skeleton {
-    /* background-color: #393f4f; */
-    /* background-image: linear-gradient(90deg, #393f4f, #42485a, #393f4f); */
-    /* background-color: hsl(224, 16%, 27%); */
-    /* background-image: linear-gradient(90deg, hsl(224, 16%, 27%), hsl(225, 15%, 31%), hsl(224, 16%, 27%)); */
-    background-color: hsl(var(--hue), 16%, 27%);
-    background-image: linear-gradient(90deg, hsl(var(--hue), 16%, 27%), hsl(var(--hue), 15%, 31%), hsl(var(--hue), 16%, 27%));
-}
-
-.landing .hero-widget__footer {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.landing .hero-widget h4 {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.landing .hero-widget__counter span {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.landing .simple_form .user_agreement .label_input > label,
-.landing .simple_form p.lead {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.simple_form .label_input__append {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.simple_form .input.boolean label a {
-    /* color: #2b90d9; */
-    /* color: hsl(205, 70%, 51%); */
-    color: hsl(var(--hue), 70%, 51%);
-}
-
-.box-widget {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.brand__tagline {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.landing__brand svg,
-.logo-container h1 svg {
-    filter: hue-rotate(calc(var(--hue) - 220deg));
-}
-
-body.lighter {
-    /* background: #282c37; */
-    /* background: hsl(224, 16%, 19%); */
-    background: hsl(var(--hue), 16%, 19%);
-}
-
-.icon-button.inverted.disabled {
-    /* color: #707b97; */
-    /* color: hsl(223, 16%, 52%); */
-    color: hsl(var(--hue), 16%, 52%);
-}
-
-.compose-form .autosuggest-account .display-name__account {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.status__info__icons {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.account__action-bar__tab.active {
-    /* border-bottom-color: #6364ff; */
-    /* border-bottom-color: hsl(240, 100%, 69%); */
-    border-bottom-color: hsl(var(--hue), 100%, 69%);
-}
-
-.account__action-bar__tab {
-    /* border-left-color: #393f4f; */
-    /* border-left-color: hsl(224, 16%, 27%); */
-    border-left-color: hsl(var(--hue), 16%, 27%);
-}
-
-.account__action-bar {
-    /* border-top-color: #393f4f; */
-    /* border-bottom-color: #393f4f; */
-    /* border-top-color: hsl(224, 16%, 27%); */
-    /* border-bottom-color: hsl(224, 16%, 27%); */
-    border-top-color: hsl(var(--hue), 16%, 27%);
-    border-bottom-color: hsl(var(--hue), 16%, 27%);
-}
-
-.account__action-bar__tab > span {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.account__header__bio .account__header__joined {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.account__header__bar {
-    /* background: #313543; */
-    /* border-bottom-color: #42485a; */
-    /* background: hsl(227, 16%, 23%); */
-    /* border-bottom-color: hsl(225, 15%, 31%); */
-    background: hsl(var(--hue), 16%, 23%);
-    border-bottom-color: hsl(var(--hue), 15%, 31%);
-}
-
-.translate-button {
-    /* color: #606984; */
-    /* color: hsl(225, 16%, 45%); */
-    color: hsl(var(--hue), 16%, 45%);
-}
-
-.reactions-bar .emoji-button {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover {
-    /* color: #a8b9cf; */
-    /* color: hsl(214, 29%, 74%); */
-    color: hsl(var(--hue), 29%, 74%);
-}
-
-.announcements__item__content a {
-    /* color: #d9e1e8; */
-    /* color: hsl(208, 25%, 88%); */
-    color: hsl(var(--hue), 25%, 88%);
-}
-
-.conversation--unread {
-    /* background: #2c313d; */
-    /* background: hsl(222, 16%, 21%); */
-    background: hsl(var(--hue), 16%, 21%);
-}
-
-.conversation {
-    /* border-bottom-color: #393f4f; */
-    /* border-bottom-color: hsl(224, 16%, 27%); */
-    border-bottom-color: hsl(var(--hue), 16%, 27%);
-}
-
-.conversation__content__relative-time {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.conversation__unread {
-    /* background: #8c8dff; */
-    /* background: hsl(239, 100%, 77%); */
-    background: hsl(var(--hue), 100%, 77%);
-}
-
-.empty-column-indicator a, .follow_requests-unlocked_explanation a {
-    /* color: #8c8dff; */
-    /* color: hsl(239, 100%, 77%); */
-    color: hsl(var(--hue), 100%, 77%);
-}
-
-.conversation__content__names {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.account--panel {
-    /* 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%);
-}
-
-.account__header__content {
-    /* color: #9baec8; */
-    /* color: hsl(215, 29%, 70%); */
-    color: hsl(var(--hue), 29%, 70%);
-}
-
-.limited-account-hint p {
-    /* color: #d9e1e8; */
-    /* color: hsl(208, 25%, 88%); */
-    color: hsl(var(--hue), 25%, 88%);
-}
-
-
-
-/* ================= */
-/* 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 {
+/* ==UserStyle==
+@name           Blueberries Mastodon UI user theme
+@description    Mastodon UI user theme by HugoBDesigner and Brodokk but purple mode
+@namespace      github.com/brodokk/Blueberries-Mastodon-UI-user-theme
+@homepageURL    https://github.com/brodokk/Blueberries-Mastodon-UI-user-theme
+@supportURL     https://github.com/brodokk/Blueberries-Mastodon-UI-user-theme/issues
+@author         brodokk <brodokk@brodokk.space> (https://github.com/brodokk)
+@version        1.1.0
+@license        CC-BY
+==/UserStyle== */
+
+@-moz-document domain("mastodon.social") {
+    /* Blueberries Mastodon UI user theme (c) CC-BY by HugoBDesigner, brodokk */
+    :root {
+        /* DEFAULT HUE */
+        /* --hue: 240deg; */
+        /* AVOCADO HUE */
+        /* --hue: 90deg; */
+        /* BLUEBERRIES HUE */
+        /* --hue: 300deg; */
+        /* CURRENT HUE */
+        --hue: 300deg;
+    }
+
+    .navigation-panel a.column-link.column-link--logo:after {
+        content: "🫐";
+        font-size: 14px;
+        vertical-align: top;
+        padding: 3px;
+        opacity: 50%;
+    }
+
+    /* start brodokk fixes */
+
+    .getting-started, .getting-started__footer p, .getting-started__footer p a {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .nothing-here {
         /* background: #282c37; */
-        /* border-bottom-color: #393f4f; */
         /* background: hsl(224, 16%, 19%); */
-        /* border-bottom-color: hsl(224, 16%, 27%); */
         background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .admin-wrapper .content-heading {
+        /* border-bottom: 1px solid #393f4f; */
+        /* border-bottom: 1px solid hsl(224, 16%, 27%); */
+        border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
+    }
+
+    .getting-started__footer a, .getting-started__trends .trends__item__current, .setting-text, .icon-button.disabled, .account__header__bio .account__header__joined, .nothing-here {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .setting-text {
+        /* border-bottom: 2px solid #9baec8; */
+        /* border-bottom: 2px solid hsl(215, 29%, 70%); */
+        border-bottom: 2px solid hsl(var(--hue), 29%, 70%);
+    }
+
+    .account__header__bar {
+        /* border-color: #313543; */
+        /* border-color: hsl(227, 16%, 23%); */
+        background: hsl(var(--hue), 16%, 23%);
+    }
+
+    .account__header__bio .account__header__fields {
+        /*   border-top: 1px solid #42485a; */
+        /*   border-top: 1px solid hsl(225, 15%, 31%); */
+        border-top: 1px solid hsl(var(--hue), 15%, 31%);
+    }
+
+    .batch-table .nothing-here {
+        /* background: #17191f; */
+        /* background: hsl(225, 15%, 11%); */
+        background: hsl(var(--hue), 15%, 11%);
+    }
+
+    /* Add suport on instance information when connected */
+
+    .rules-list li {
+        /*    border-bottom: 1px solid #393f4f; */
+        /*    border-bottom: 1px solid hsl(224, 16%, 27%); */
+        border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
+    }
+
+    .about__domain-blocks {
+        /* background: #1f232b; */
+        /* border: 1px solid #313543; */
+        /* background: hsl(220, 16%, 15%); */
+        /* border: 1px solid hsl(227, 16%, 23%); */
+        background: hsl(var(--hue), 16%, 15%);
+        border: 1px solid hsl(var(--hue), 16%, 23%);
+    }
+
+    .about__domain-blocks__domain {
+        /* color: #9baec8; */
+        /* border-bottom: 1px solid #313543; */
+        /* color: hsl(215, 29%, 70%); */
+        /* border-bottom: 1px solid hsl(227, 16%, 23%); */
+        color: hsl(var(--hue), 29%, 70%);
+        border-bottom: 1px solid hsl(var(--hue), 16%, 23%);
+    }
+
+    .about__domain-blocks__domain h6 {
+        /* color: #d9e1e8; */
+        /* color: hsl(var(--hue), 25%, 88%); */
+        color: hsl(var(--hue), 25%, 88%);
+    }
+
+    .about__domain-blocks__domain:nth-child(2n) {
+        /* background: #242731; */
+        /* background: hsl(226, 15%, 17%); */
+        background: hsl(var(--hue), 15%, 17%);
+    }
+
+    /* search fixes */
+
+    .search-results__info {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .account {
+        /* border-bottom: 1px solid #393f4f; */
+        /* border-bottom: 1px solid hsl(224, 16%, 27%); */
+        border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
+    }
+
+    /* Add fixes for profile directory */
+
+    .account-card__header img {
+        /* background: #17191f; */
+        /* background: hsl(225, 15%, 11%); */
+        background: hsl(var(--hue), 15%, 11%);
+    }
+
+    /* start brodokk bonus fixes */
+
+    .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%);
+    }
+
+    /* Add support page not found when connected */
+
+    .regeneration-indicator {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .regeneration-indicator {
+        /* color: #282c37; */
+        /* color: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .regeneration-indicator__label strong {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .error-column {
+        /*    background: rgb(40, 44, 55);  */
+        /*    background: hsl(224, 16%, 19%);  */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .error-column__message {
+        /* color: rgb(155, 174, 200); */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    /* Graze toot fixes */
+
+    .graze-toot-container.site {
+        /* border: 1px solid #606984; */
+        /* background: #383d4c; */
+        /* border: 1px solid hsl(225, 16%, 45%); */
+        /* background: hsl(225, 15%, 26%); */
+        border: 1px solid hsl(var(--hue), 16%, 45%);
+        background: hsl(var(--hue), 15%, 26%);;
+    }
+
+    .graze-toot-container.site h2 {
+        /* color: rgba(255, 255, 255, 0.6); */
+        /* color: hsla(255, 0%, 100%, 0.6); */
+        color: hsla(var(--hue), 0%, 100%, 0.6);
+    }
+
+    /* You might be interested in fixes */
+
+    .trends__header {
+        /* color: #606984; */
+        /* background: #2c313d; */
+        /* border-bottom: 1px solid #1f232b; */
+        /* color:  hsl(225, 16%, 45%); */
+        /* background: hsl(222, 16%, 21%); */
+        /* border-bottom: 1px solid hsl(220, 16%, 15%); */
+        color: hsl(var(--hue), 16%, 45%);
+        background: hsl(var(--hue), 16%, 21%);
+        border-bottom: 1px solid #1f232b;
+        border-bottom: 1px solid hsl(var(--hue), 16%, 15%);
+    }
+
+    /* glitsoc fixes */
+
+    .notification.unread::before, .status.unread::before {
+        /* -webkit-border-start: 4px solid #8c8dff; */
+        /* -webkit-border-start: 4px solid hsl(239, 100%, 77%); */
+        -webkit-border-start: 4px solid hsl(var(--hue), 100%, 77%);
+        /* border-inline-start: 4px solid #8c8dff; */
+        /* border-inline-start: 4px solid hsl(239, 100%, 77%); */
+        border-inline-start: 4px solid hsl(var(--hue), 100%, 77%);
+    }
+
+    .drawer__header > * {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .pillbar-button:not([disabled]):focus, .pillbar-button:not([disabled]):hover {
+        /* background-color: #131419; */
+        /* background-color: hsl(230, 14%, 9%); */
+        background-color: hsl(var(--hue), 14%, 9%);
+    }
+
+    .pillbar-button {
+        /* background-color: #282c37; */
+        /* background-color: hsl(224, 16%, 19%); */
+        background-color: hsl(var(--hue), 16%, 19%);
+    }
+
+    .pillbar-button:not([disabled]).active {
+        /* 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%);
+    }
+
+    .pillbar-button:not([disabled]).active:focus, .pillbar-button:not([disabled]).active:hover {
+        /* background-color: #6364ff; */
+        /* background-color: hsl(240, 100%, 69%); */
+        /* background-color: hsl(var(--hue), 100%, 69%); */
+        /* Manually changed for readability */
+        background-color: hsl(var(--hue), 60%, 69%);
+    }
+
+    .mbstobon-0 .drawer__inner__mastodon {
+        /* background-color: #444b5d; */
+        /* background-color: hsl(223, 16%, 32%); */
+        /* background-color: hsl(240deg, 16%, 32%); */
+        background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
+    }
+
+    .compose-form .autosuggest-input label .autosuggest-textarea__textarea,
+    .compose-form .autosuggest-textarea label .autosuggest-textarea__textarea {
+        /* color: #d9e1e8; */
+        /* background: #282c37; */
+        /* color: hsl(208, 25%, 88%); */
+        /* background: hsl(224, 16%, 19%); */
+        color: hsl(var(--hue), 25%, 88%);
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .compose-form .autosuggest-input label .autosuggest-textarea__textarea::placeholder,
+    .compose-form .autosuggest-textarea label .autosuggest-textarea__textarea::placeholder {
+        /* color: #d9e1e8; */
+        /* color: hsl(var(--hue), 25%, 88%); */
+        color: hsl(var(--hue), 25%, 88%);
+    }
+
+    /* end brodokk bonus fixes */
+
+    .admin-wrapper .sidebar .logo {
+        filter: hue-rotate(calc(var(--hue) - 260deg));
+    }
+
+    .media-modal__page-dot:first-of-type.active:not(:only-child):before {
+        content: "";
+        display: block;
+        border-radius: .5rem;
+        width: .4rem;
+        height: 1.5rem;
+        background-color: rgba(255, 255, 255, 0.7);
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        margin-top: calc(-50vh + 15%);
+        margin-left: calc(-50vw + 50%);
+        transform: translateY(-50%) translateX(calc(30px - 1rem));
+    }
+
+    .media-modal__page-dot:last-of-type.active:not(:only-child):before {
+        content: "";
+        display: block;
+        border-radius: .5rem;
+        width: .4rem;
+        height: 1.5rem;
+        background-color: rgba(255, 255, 255, 0.7);
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        margin-top: calc(-50vh + 15%);
+        margin-left: calc(50vw + 50%);
+        transform: translateY(-50%) translateX(calc(-30px + .5rem));
+    }
+
+    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%);
     }
 
-    .columns-area__panels__pane--navigational .navigation-panel {
+    .getting-started__trends h4 a {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .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; */
+        /* background: #fff; */
+        /* border: 1px solid #dbdbdb; */
+        /* color: hsl(224, 16%, 19%); */
+        /* backgroud: hsl(0, 0%, 100%); */
+        /* border: 1px solid hsl(0, 0%, 86%);*/
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 70.8%, 82.5%);
+        background: hsl(var(--hue), 25.4%, 27.8%);
+        border: 1px solid hsl(var(--hue), 16%, 45%);
+    }
+
+    .poll__input:active,
+    .poll__input:focus,
+    .poll__input:hover {
+        /* border-color: #acd6c1; */
+        /* border-color: hsl(150, 34%, 76%); */
+        border-color: hsl(var(--hue), 34%, 76%);
+    }
+
+    .compose-form__poll-wrapper .icon-button.disabled {
+        /* color: #dbdbdb; */
+        /* color: hsl(0, 0%, 86%); */
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .poll__cancel .icon-button {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        /* Manually changed for readability */
+        color: hsl(var(--hue),  80%, 88.2%);
+    }
+
+    .poll__cancel .icon-button:active,
+    .poll__cancel .icon-button:focus,
+    .poll__cancel .icon-button:hover {
+        /* color: #707b97; */
+        /* color: hsl(223, 16%, 52%); */
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 62.6%, 82.2%);
+    }
+
+    .compose-form__poll-wrapper .poll__footer button:focus,
+    .compose-form__poll-wrapper .poll__footer select: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 select {
+        /* color: #282c37; */
+        /* background-color: #fff; */
+        /* border: 1px solid #dbdbdb; */
+        /* color: hsl(224, 16%, 19%); */
+        /* backgroud-color: hsl(0, 0%, 100%); */
+        /* border: 1px solid hsl(0, 0%, 86%);*/
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 70.8%, 82.5%);
+        background-color: hsl(var(--hue), 25.4%, 27.8%);
+        border: 1px solid hsl(var(--hue), 16%, 45%);
+    }
+
+    .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%); */
+        /* Manually changed for readability */
+        color: hsl(300, 46%, 75.3%);
+    }
+
+    .language-dropdown__dropdown__results__item__common-name {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .emoji-picker-dropdown__menu {
+        /* background: #fff; */
+        /* background: hsl(0, 0%, 100%); */
+        /* Manually changed for readability */
+        background: hsl(var(--hue), 15.9%, 21%);
+        /*box-shadow: 4px 4px 6px rgba(0,0,0,.4);*/
+    }
+
+    .emoji-mart-scroll {
+        /* background: #fff; */
+        /* background: hsl(0, 0%, 100%); */
+        /* Manually changed for readability */
+        background: hsl(var(--hue), 15.9%, 21%);
+    }
+
+    .emoji-mart-category-label span {
+        /* background: #fff; */
+        /* background: hsl(0, 0%, 100%); */
+        /* Manually changed for readability */
+        background: hsl(var(--hue), 15.9%, 21%);
+    }
+
+    .emoji-mart {
+        /* color: #282c37; */
+        /* color: hsl(224, 16%, 19%); */
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 45.8%, 76.9%);
+    }
+
+    .emoji-mart-search {
+        /* background: #fff; */
+        /* background: hsl(0, 0%, 100%); */
+        /* Manually changed for readability */
+        background: hsl(var(--hue), 15.9%, 21%);
+    }
+
+    .emoji-picker-dropdown__modifiers__menu {
+        /* background: #fff; */
+        /* background: hsl(0, 0%, 100%); */
+        /* Manually changed for readability */
+        background: hsl(var(--hue), 15.9%, 21%);
+    }
+
+    .emoji-picker-dropdown__modifiers__menu button:active,
+    .emoji-picker-dropdown__modifiers__menu button:focus,
+    .emoji-picker-dropdown__modifiers__menu button:hover {
+        /* background: rgba(217,225,232,.4); */
+        /* background: hsla(208, 25%, 88%, 0.4); */
+        /* Manually changed for readability */
+        background: hsla(var(--hue), 25%, 88%, 0.4);
+    }
+
+    .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-left-color: #393f4f; */
+        /* border-bottom: 1px solid #393f4f; */
         /* background: hsl(224, 16%, 19%); */
-        /* border-left-color: hsl(224, 16%, 27%); */
+        /* 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__link:active,
+    .poll__link:focus {
+        /* background-color: rgba(96,105,132,.1); */
+        /* background-color: hsla(225, 16%, 45%, .1); */
+        background-color: hsla(var(--hue), 16%, 45%, .1);
+    }
+
+    .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__icon .fa-times-circle:hover {
+        /* color: #707b97; */
+        /* color: hsl(223, 16%, 52%); */
+        color: hsl(var(--hue), 16%, 52%);
+    }
+
+    .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; */
+        /* background: #17191f; */
+        /* border-color: hsl(227, 16%, 23%); */
+        /* background: hsl(225, 15%, 11%); */
+        border-color: hsl(var(--hue), 16%, 23%);
+        background: hsl(var(--hue), 15%, 11%);
+    }
+
+    .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; */
+        /* border-color: #0a0b0e; */
+        /* color: hsl(214, 29%, 74%); */
+        /* border-color: hsl(225, 17%, 5%); */
+        color: hsl(var(--hue), 29%, 74%);
+        border-color: hsl(var(--hue), 17%, 5%);
+    }
+
+    .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%);
+    }
+
+    .timeline-hint a:active,
+    .timeline-hint a:focus,
+    .timeline-hint a:hover {
+        /* color: #a0a1ff; */
+        /* color: hsl(239, 100%, 81%); */
+        color: hsl(var(--hue), 100%, 81%);
+    }
+
+    .column-title p {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .account__header__image {
+        /* background: #1f232b; */
+        /* background: hsl(220, 16%, 15%); */
+        background: hsl(var(--hue), 16%, 15%);
+    }
+
+    .reactions-bar__item__count {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .reactions-bar__item:active,
+    .reactions-bar__item:focus,
+    .reactions-bar__item:hover {
+        /* background: #4a5266; */
+        /* background: hsl(223, 16%, 35%); */
+        background: hsl(var(--hue), 16%, 35%);
+    }
+
+    .announcements__pagination {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .interaction-modal__icon {
+        /* color: #8c8dff; */
+        /* color: hsl(239, 100%, 77%); */
+        color: hsl(var(--hue), 100%, 77%);
+    }
+
+    .interaction-modal__lead p,
+    .interaction-modal__choices__choice p {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .copypaste input {
+        /* background: #17191f; */
+        /* border-color: #8c8dff; */
+        /* color: #9baec8; */
+        /* background: hsl(225, 15%, 11%); */
+        /* border-color: hsl(239, 100%, 77%); */
+        /* color: hsl(215, 29%, 70%); */
+        background: hsl(var(--hue), 15%, 11%);
+        border-color: hsl(var(--hue), 100%, 77%);
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .copypaste input:focus {
+        /* background: #1f232b; */
+        /* background: hsl(220, 16%, 15%); */
+        background: hsl(var(--hue), 16%, 15%);
+    }
+
+    .interaction-modal {
+        /* background: #282c37; */
+        /* background: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .compare-history-modal .status__content a {
+        /* color: #8c8dff; */
+        /* color: hsl(239, 100%, 77%); */
+        /* color: hsl(var(--hue), 100%, 77%); */
+        /* Manually changed for readability */
+        color: hsl(var(--hue), 70%, 47%);
+    }
+
+    .filter-form {
+        /* background: #282c37; */
+        /* background: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .radio-button__input {
+        /* border-color: #9baec8; */
+        /* border-color: hsl(215, 29%, 70%); */
+        border-color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .radio-button__input.checked {
+        /* border-color: #7778ff; */
+        /* background: #7778ff; */
+        /* border-color: hsl(240, 100%, 73%); */
+        /* background: hsl(240, 100%, 73%); */
+        border-color: hsl(var(--hue), 100%, 73%);
+        background: hsl(var(--hue), 100%, 73%);
+    }
+
+    .getting-started__trends .trends__item__current {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .keyboard-shortcuts kbd {
+        /* background-color: #393f4f; */
+        /* border-color: #1f232b; */
+        /* background-color: hsl(224, 16%, 27%); */
+        /* border-color: hsl(220, 16%, 15%); */
+        background-color: hsl(var(--hue), 16%, 27%);
+        border-color: hsl(var(--hue), 16%, 15%);
+    }
+
+    .skeleton {
+        /* background-color: #393f4f; */
+        /* background-image: linear-gradient(90deg, #393f4f, #42485a, #393f4f); */
+        /* background-color: hsl(224, 16%, 27%); */
+        /* background-image: linear-gradient(90deg, hsl(224, 16%, 27%), hsl(225, 15%, 31%), hsl(224, 16%, 27%)); */
+        background-color: hsl(var(--hue), 16%, 27%);
+        background-image: linear-gradient(90deg, hsl(var(--hue), 16%, 27%), hsl(var(--hue), 15%, 31%), hsl(var(--hue), 16%, 27%));
+    }
+
+    .landing .hero-widget__footer {
+        /* background: #282c37; */
+        /* background: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .landing .hero-widget h4 {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .landing .hero-widget__counter span {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .landing .simple_form .user_agreement .label_input > label,
+    .landing .simple_form p.lead {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .simple_form .label_input__append {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .simple_form .input.boolean label a {
+        /* color: #2b90d9; */
+        /* color: hsl(205, 70%, 51%); */
+        color: hsl(var(--hue), 70%, 51%);
+    }
+
+    .box-widget {
+        /* background: #282c37; */
+        /* background: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .brand__tagline {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .landing__brand svg,
+    .logo-container h1 svg {
+        filter: hue-rotate(calc(var(--hue) - 220deg));
+    }
+
+    body.lighter {
+        /* background: #282c37; */
+        /* background: hsl(224, 16%, 19%); */
+        background: hsl(var(--hue), 16%, 19%);
+    }
+
+    .icon-button.inverted.disabled {
+        /* color: #707b97; */
+        /* color: hsl(223, 16%, 52%); */
+        color: hsl(var(--hue), 16%, 52%);
+    }
+
+    .compose-form .autosuggest-account .display-name__account {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .status__info__icons {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .account__action-bar__tab.active {
+        /* border-bottom-color: #6364ff; */
+        /* border-bottom-color: hsl(240, 100%, 69%); */
+        border-bottom-color: hsl(var(--hue), 100%, 69%);
+    }
+
+    .account__action-bar__tab {
+        /* border-left-color: #393f4f; */
+        /* border-left-color: hsl(224, 16%, 27%); */
         border-left-color: hsl(var(--hue), 16%, 27%);
     }
-}
+
+    .account__action-bar {
+        /* border-top-color: #393f4f; */
+        /* border-bottom-color: #393f4f; */
+        /* border-top-color: hsl(224, 16%, 27%); */
+        /* border-bottom-color: hsl(224, 16%, 27%); */
+        border-top-color: hsl(var(--hue), 16%, 27%);
+        border-bottom-color: hsl(var(--hue), 16%, 27%);
+    }
+
+    .account__action-bar__tab > span {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .account__header__bio .account__header__joined {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .account__header__bar {
+        /* background: #313543; */
+        /* border-bottom-color: #42485a; */
+        /* background: hsl(227, 16%, 23%); */
+        /* border-bottom-color: hsl(225, 15%, 31%); */
+        background: hsl(var(--hue), 16%, 23%);
+        border-bottom-color: hsl(var(--hue), 15%, 31%);
+    }
+
+    .translate-button {
+        /* color: #606984; */
+        /* color: hsl(225, 16%, 45%); */
+        color: hsl(var(--hue), 16%, 45%);
+    }
+
+    .reactions-bar .emoji-button {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover {
+        /* color: #a8b9cf; */
+        /* color: hsl(214, 29%, 74%); */
+        color: hsl(var(--hue), 29%, 74%);
+    }
+
+    .announcements__item__content a {
+        /* color: #d9e1e8; */
+        /* color: hsl(208, 25%, 88%); */
+        color: hsl(var(--hue), 25%, 88%);
+    }
+
+    .conversation--unread {
+        /* background: #2c313d; */
+        /* background: hsl(222, 16%, 21%); */
+        background: hsl(var(--hue), 16%, 21%);
+    }
+
+    .conversation {
+        /* border-bottom-color: #393f4f; */
+        /* border-bottom-color: hsl(224, 16%, 27%); */
+        border-bottom-color: hsl(var(--hue), 16%, 27%);
+    }
+
+    .conversation__content__relative-time {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .conversation__unread {
+        /* background: #8c8dff; */
+        /* background: hsl(239, 100%, 77%); */
+        background: hsl(var(--hue), 100%, 77%);
+    }
+
+    .empty-column-indicator a, .follow_requests-unlocked_explanation a {
+        /* color: #8c8dff; */
+        /* color: hsl(239, 100%, 77%); */
+        color: hsl(var(--hue), 100%, 77%);
+    }
+
+    .conversation__content__names {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .account--panel {
+        /* 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%);
+    }
+
+    .account__header__content {
+        /* color: #9baec8; */
+        /* color: hsl(215, 29%, 70%); */
+        color: hsl(var(--hue), 29%, 70%);
+    }
+
+    .limited-account-hint p {
+        /* color: #d9e1e8; */
+        /* color: hsl(208, 25%, 88%); */
+        color: hsl(var(--hue), 25%, 88%);
+    }
+
+
+
+    /* ================= */
+    /* 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%);
+        }
+    }
+}
\ No newline at end of file