:root {
  --gray-900: #f6f8fa;
  --gray-800: #e6e9ec;
  --gray-700: #d1d5da;
  --gray-600: #959da5;
  --gray-500: #6a737d;
  --gray-400: #586069;
  --gray-300: #444d56;
  --gray-200: #2f363d;
  --gray-100: #24292e;
  --gray-000: #181a1c;

  --purple-800: #e6dcfd;
  --purple-700: #d1bcf9;
  --purple-600: #b392f0;
  --purple-500: #8a63d2;
  /* Ligo decoration */
  /* --purple-500: #7cb342; */
  /* Halloween decoration */
  /* --purple-500: #e76c28; */
  /* November decoration */
   /*--purple-500: #9D2235;*/
  /* December decoration */
   /*--purple-500: #84430b;*/
  --purple-400: #6f42c1;
  --purple-300: #5a32a3;
  --purple-200: #4c2889;
  --purple-100: #3a1d6e;
  --purple-000: #29134e;
  --purple-900: #f5f0ff;

  --primary-color: #7548bf;
  --muted-color: #4e5863;
  --control-border: #717b86;
  --error-color: #b51e2e;
  --success-color: #176b32;
  --coin-color: #056358;
  --xp-color: #dcae12;
  --primary-color-opacity: rgba(188, 150, 255, 0.431);
  --primary-color-dark: var(--purple-200);
  --link-color: #5a32a3;
  --bg-color: var(--gray-900);
  --fg-color: var(--gray-100);

  --border-radius: 10px;

  color-scheme: light;
}

[data-app-header] {
  background: rgba(246, 248, 250, 0.9);
}

[data-app-header][data-tucked]::before {
  box-shadow: inset 0 -1px 0 transparent, 0 20px 20px -20px rgb(0 0 0 / 30%);
}

.main-menu .menu-group {
  background-color: var(--gray-800);
}

[data-main-menu] [data-main-menu-group] {
  background-color: var(--gray-800) !important;
}

h1.page-title::before {
  background-color: var(--gray-000);
}

h1.page-title::before {
  background-color: var(--gray-000);
}

h1.page-title {
  color: var(--muted-color);
}

.button {
  color: var(--gray-200);
}

.button:hover {
  color: var(--gray-100);
  filter: brightness(1.2);
}

.button.primary:hover,
.button.primary {
  color: #fff;
}

.button[data-disabled],
.button:disabled {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.button.loading::before {
  border-color: rgba(0, 0, 0, 0.1);
  border-right-color: var(--purple-500);
}

body .reaction.did-react {
  box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.7);
}

body .reaction.did-react:hover {
  box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.6);
}

body .reaction.did-react .reaction-user-avatars img {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 0 0 2px var(--primary-color);
}

body .reaction.did-react:hover .reaction-user-avatars img {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 0 2px var(--primary-color);
}

.control-button:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.activity-article-preview:hover .activity-article-preview-cta {
  color: #fff;
}

.user-head-group-list button:hover {
  color: #fff;
}

.user-head-group-list {
  border-color: rgba(200, 200, 200, 0.2);
}

[data-game-banner-link]:hover,
[data-group-banner-link]:hover,
.event-banner > .wrapper > menu a:hover,
.post-type-switcher a:hover,
[data-user-banner] > menu a:hover {
  color: var(--gray-200);
}

.main-menu a:not(.active):focus,
.main-menu a:not(.active):hover {
  background-color: var(--gray-700) !important;
}

[data-main-menu] a:not([aria-current="page"]):focus,
[data-main-menu] a:not([aria-current="page"]):hover {
  background-color: var(--gray-700) !important;
}

.main-menu a.active,
[data-main-menu] a[aria-current="page"] {
  color: #fff;
  background-color: var(--primary-color) !important;
}

.user-head-group-list button strong,
.user-head-group strong,
.main-menu a strong {
  background-color: var(--gray-700);
}

.reaction-add:hover {
  color: var(--gray-900);
  background-color: var(--gray-500);
}

body .reactions-tooltip {
  background-color: var(--gray-900);
}

body .reactions-tooltip .reaction {
  border-color: var(--gray-800);
}

body .reactions-tooltip .reaction:hover {
  border-color: var(--gray-700);
  background-color: var(--gray-700);
}

.group-avatar-upload:hover .add-avatar.add-avatar-edit > svg {
  color: var(--purple-900);
}

.sidebar-group-top:hover,
.sidebar-comment:hover {
  color: var(--gray-200);
}

.side-menu > a:hover {
  color: var(--gray-900);
}

.post-type-switcher a.active {
  background-color: var(--gray-900);
  color: var(--link-color) !important;
}

.event-banner,
[data-group-banner] {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08),
    0 5px 5px 0 rgba(0, 0, 0, 0.04);
}

.event-banner > picture,
[data-group-banner] > picture {
  border-color: #edeef0;
}

.event-banner > .wrapper > div .avatar,
[data-group-banner-shell] [data-avatar] {
  background-color: #edeef0;
  box-shadow: 0 0 0 5px #edeef0;
}

.event-banner > picture::before,
[data-group-banner] > picture::before {
  box-shadow: inset 0 -180px 80px -80px var(--gray-800);
}

.event-calendar {
  background-color: var(--bg-color);
  color: var(--fg-color);
  box-shadow: 0 5px 5px 1px var(--gray-800);
}

.achievement-group .progress-step.incomplete {
  color: var(--muted-color);
}

.progress-wrapper,
[data-solo-comment-body],
.activity-comments {
  background-color: rgba(255, 255, 255, 0.3);
}

.comment-form button[type="submit"] {
  color: var(--gray-900);
}

.editor-draft-restore {
  color: var(--fg-color);
}

.mobile-menu-content {
  background-color: var(--gray-900);
}

.mobile-menu-content-navigation > button,
.mobile-menu-content-navigation > a {
  color: var(--gray-200);
}

.mobile-menu-content-navigation > a.menu-color-primary {
  color: var(--purple-200);
}

.post-type-switcher a.active {
  color: var(--gray-900);
}

.control-button-content {
  background-color: var(--bg-color);
  color: #222;
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

.control-button-content [role="separator"] {
  background-color: rgba(125, 125, 125, 0.1);
}

.notification-body .comment {
  background-color: rgba(255, 255, 255, 0.3);
}

.notification-body a.comment-body:hover {
  background-color: rgba(255,255,255,0.4);
}

.content-body .meta-card:hover {
  background-color: #bdc3c8;
}

.main-search input {
  background-color: #fff;
}

.mobile-menu-groups {
  background-color: var(--gray-700);
}

div.comment-body::after {
  box-shadow: inset 0 -50px 20px -20px rgba(255, 255, 255, 0.3),
    inset 0 -50px 20px -20px var(--gray-800);
}

[data-scoreboard-body] {
  --scoreboard-row-odd-bg: rgba(0, 0, 0, 0.02);
  --scoreboard-row-hover-bg: var(--gray-900);
}

@media only screen and (max-width: 740px) {
  [data-main-menu] a[aria-current="page"] {
    background-color: transparent !important;
    color: var(--link-color);
  }

  .main-menu {
    background-color: rgba(246, 248, 250, 0.9);
  }

  .main-menu .menu-group,
  .main-menu > a {
    background-color: var(--gray-900);
  }
}

.tooltip {
  background-color: var(--bg-color);
  color: #222;
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

.user-hover-card-loading,
.user-hover-card .mini-user {
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 4px 6px 2px;
}

.achievement-modal-content {
  background-color: var(--gray-900);
}

.achievement-modal-controls .control-blips i,
.achievement-modal-controls button {
  background-color: var(--gray-600);
}

.achievement-modal-controls .control-blips i:hover,
.achievement-modal-controls button:hover {
  background-color: var(--gray-900);
}

.achievement-modal-backdrop {
  background-color: var(--gray-100);
}

.achievement-modal-controls .control-blips i.active {
  background-color: var(--gray-900) !important;
  box-shadow: 0 0 0 1px var(--gray-500), 0 0 0 3px var(--gray-900);
}

str-poll {
  background-color: rgba(0,0,0,0.05);
}

str-poll.done > .answers button {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

str-poll.done > .answers button > i.bar {
  background-color: var(--gray-900);
}

str-poll > .answers button.my-poll-vote > span::after {
  background-color: currentColor;
	mask: url("/assets/keyline/stroke/circle-check.svg") center / contain no-repeat;
	-webkit-mask: url("/assets/keyline/stroke/circle-check.svg") center / contain no-repeat;
}

.header-strike-coin,
.header-strike-coin:hover,
.price-tag,
[data-price-tag] {
  color: var(--coin-color);
}

.owned-tag,
[data-owned-tag] {
  color: #fff;
}

[data-shop-item] {
  --shop-item-hover-bg: var(--bg-color);
}

:is([data-theme="light"], .light) [data-shop-item]:hover {
  background-color: var(--bg-color) !important;
}

button .price-tag,
button [data-price-tag] {
  background-color: rgba(255, 255, 255, 0.5);
}

.sidebar-panel.sidebar-puzzle .progress-bar {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.sidebar-panel.sidebar-puzzle .progress-bar > div {
  background-color: var(--primary-color);
}

[class*="sidebarPuzzle"] .progress-bar {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

[class*="sidebarPuzzle"] .progress-bar > div {
  background-color: var(--primary-color);
}

.coin-badge {
  border-color: #1aab99;
  color: var(--coin-color);
}

.username-decoration-core {
  color: #976e00;
  background-color: #f3d287;
}

[data-app-bg-decoration]::before {
  background: linear-gradient(0deg, var(--bg-color), rgba(230, 234, 237, 0.3));
}

code {
  background-color: rgba(175, 184, 193, 0.2);
}

[data-game-banner] > picture::before {
  background: linear-gradient(0deg, #d1d3d5 0%, transparent 100%), linear-gradient(90deg, #d1d3d5, transparent 70%), linear-gradient(-90deg, #d1d3d5, transparent 70%);
}

.game-score-donut .donut-backdrop:first-child {
  stroke: #f0f0f0;
}

.game-score-donut text {
  fill: currentColor;
}

[data-game-banner-title] {
  text-shadow: none;
}

.hashtag {
  background-color: rgba(0,0,0,0.05);
}

.activity-forum-types a {
  background-color: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.7);
}

.activity-forum-types a:hover {
  background-color: rgba(0,0,0,0.07);
  color: rgba(0,0,0,0.7);
}

.mention-autocomplete .autocomplete-item:hover {
  background-color: var(--gray-200);
}

.year-review-banner span {
  color: #fff;
}