help:custom css

/* Make the "Add" button on the ai_tags page larger */
.c-ai-tags article button {
  height: 50px;
  width: 100%;
}

/* Fix height of media asset previews on /ai_tags */
.c-ai-tags .media-asset-preview-150 > div:first-of-type { height: 150px; }
.c-ai-tags .media-asset-preview-180 > div:first-of-type { height: 180px; }
.c-ai-tags .media-asset-preview-225 > div:first-of-type { height: 225px; }
.c-ai-tags .media-asset-preview-270 > div:first-of-type { height: 270px; }
.c-ai-tags .media-asset-preview-360 > div:first-of-type { height: 360px; }
.c-ai-tags .media-asset-preview-720 > div:first-of-type { height: 720px; }

/* Make ai-tagging thumbnails disappear after clicking "Add" */
div#c-ai-tags article.media-asset-preview:has(.button-outline-danger),
div#c-ai-tags article.media-asset-preview:has(.tag-type-3), 
div#c-ai-tags article.media-asset-preview:has(.tag-type-4),
div#c-ai-tags article.media-asset-preview:has(a[data-tag-name*="rating"], a[data-tag-name="striped_legwear"], a[data-tag-name="bangs"], a[data-tag-name="fishnet_legwear"], a[data-tag-name="ground_vehicle"], a[data-tag-name="white_legwear"], a[data-tag-name="silver_hair"], a[data-tag-name="black_legwear"]) {
  display: none;
}

/* Make ai-tagging thumbnails unclickable */
#a-index > div.media-asset-gallery.media-asset-gallery-360 > div > article > div.flex-auto.flex.items-center > a {
  pointer-events: none;
}

/* Enable the ai-tags column on post  and edit */
.ai-tags-related-tags-column.hidden {
    display: initial !important;
}

/* Show a checkerboard pattern behind transparent images */
#image, .media-asset-image {
    --checkerboard: repeating-conic-gradient(transparent 0% 25%, #77789244 0% 50%) 0 0 / 32px 32px;
    background: var(--checkerboard);
}
/* Show a darker/lighter checkerboard behind the image on hover, depending on light/dark theme.
 * (It would be nice to use :active instead but that conflicts with the note toggle)
 */
body[data-current--theme="light"] #image:hover,
body[data-current--theme="light"] .media-asset-image:hover {
    background: var(--checkerboard), var(--grey-9);
}
body[data-current--theme="dark"] #image:hover,
body[data-current--theme="dark"] .media-asset-image:hover {
    background: var(--checkerboard), var(--white);
}
@media (prefers-color-scheme: dark) {
    #image:hover, .media-asset-image:hover {
        background: var(--checkerboard), var(--white);
    }
}

/* Hide " for approval" checkbox */
#c-s .post_is_pending { display: none; }

/* Hide redundant "no posts found" on IQDB search */
.iqdb-posts > .post-gallery > p {
  display: none;
}

/* Blur e- and q-rated posts */
.post-preview[data-rating="e"]  .post-preview-image, .post-preview[data-rating="q"] .post-preview-image {
    filter: blur(10px) brightness(0.5);
    transform: translateZ(0);
}
.post-preview[data-rating="e"]  .post-preview-image:hover, .post-preview[data-rating="q"] .post-preview-image:hover {
    filter: blur(0px) brightness(1);
    transform: translateZ(0);
}

/* Show a checkmark next to the artist tag on self-s, like e621.
 * Does not work on firefox by default, but can be enabled.
 * Requires  for the :has CSS selector https://caniuse.com/css-has
 */
#c-posts #a-show:has(.image-container[data-tags*="self-"]) #tag-list .tag-type-1 .search-tag:after {
  content: " ";
  padding: 0 .275em;
  margin: 0 .25rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3ath d='M244 340a28 28 0 0 1-40 0l-64-64a28 28 0 0 1 40-40l44 44 108-108a28 28 0 0 1 40 40L244 340zm268-84a256 256 0 1 1-512 0 256 256 0 0 1 512 0zM256 48a208 208 0 1 0 0 416 208 208 0 0 0 0-416z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3ath d='M244 340a28 28 0 0 1-40 0l-64-64a28 28 0 0 1 40-40l44 44 108-108a28 28 0 0 1 40 40L244 340zm268-84a256 256 0 1 1-512 0 256 256 0 0 1 512 0zM256 48a208 208 0 1 0 0 416 208 208 0 0 0 0-416z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--text-color);
}

/* Keep mode menu on screen when scrolling */
#mode-box {
  position: sticky;
  top: 0;
  background: var(--body-background-color);
  z-index: 1;
}

/* Enable flagged posts to have red borders for non-approvers. */
body[data-current--is-approver=false] .post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-flagged-color);
}
body[data-current--is-approver=false] .post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
}
body[data-current--is-approver=false] .post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
body[data-current--is-approver=false] .post-preview.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
body[data-post-is-flagged=true] .post-notice-pending {
  background: var(--post-deleted-notice-background) !important;
}

/* Sticky sidebar */
.sidebar-container {
  display: grid;
  grid-template-columns: min-content;
  grid-auto-flow: column;
}
#sidebar {
  height: 100vh;
  overflow: scroll;
  position: sticky;
  top: 0;
  /* padding-bottom: (#app-name-header + 2 * line-height + 4 * padding) + #page padding
   * allows fully scrolling sidebar without scrolling main content
   */
  padding-bottom: calc((42px + 2 * 1.25em + 4 * 6px) + 1rem);
}

/* Screen-wide search bar adapted from BrokenEagle */
@media screen and (min-width: 661px){
    /* Position the main side bar down and make it relative to allow absolute positioning. */
    #c-posts #sidebar {
        margin-top: 2.5em;
        position: relative;
    }
    /* Push the content area down so that it doesn't overlap with the search bar. */
    #c-posts #content {
        margin-top: 2.5em;
    }
    /* Move the search box down. */
    #c-posts #search-box {
        position: absolute;
        top: -2.5em;
    }
    /*Hide search header*/
    #c-posts #search-box h2 {
        display: none;
    }
    /*Screen-wide search bar*/
    #c-posts #search-box-form,
    #c-posts #tags {
        width: 95vw;
    }
}

/* Un-tabify the  form */
.c-s #form .tab-list {
  display: none;
}
#c-s #form .tab- {
  display: unset;
}
#c-s #form .tab-s {
  display: flex;
  flex-direction: column;
}
/* Re-order tabs */
.tags-tab { order: 4; }
.source-tab { order: 2; }
.similar-tab { order: 3; }
.help-tab { order: 1; }

/* highlight deprecated tags in the tag list */
[data-is-deprecated='true'] a, a[data-is-deprecated='true'] {
  color: var(--low-post-count-color) !important;
}

.blacklisted-blurred .post-preview-image { transition: filter 0.125s; }
.blacklisted-blurred .post-preview-image:hover { filter: blur(0px) !important; }
.blacklisted-blurred #image { transition: filter 0.125s; }
.blacklisted-blurred #image:hover { filter: blur(0px) !important; }

/* Show banned status on post previews */
article[data-flags*="banned"] .post-preview-link:before {
  content: "BANNED";
  color: var(--preview-icon-color);
  background: rgba(192 0 4 / 70%); /* --red-6 */
  position: absolute;
  bottom: .125rem;
  right: .125rem;
  padding: .125rem;
  margin: .125rem;
  border-radius: .25rem;
  line-height: 1;
  font-size: var(--text-xs);
  font-weight: bold;
  font-family: var(--arial-font);
}

body[data-mode-menu="edit"] { --post-mode-menu-active-post-outline-color: var(--azure-2) }
body[data-mode-menu="tag-script"] { --post-mode-menu-active-post-outline-color: #ffff00 }
body[data-mode-menu="add-fav"] { --post-mode-menu-active-post-outline-color: var(--magenta-3) }
body[data-mode-menu="remove-fav"] { --post-mode-menu-active-post-outline-color: var(--red-3) }

#image.video-component { max-height: 95vh; }

/* Disable level-based name colors */
. { color: var(--link-color) !important }

/* Make names bold */
div.author-name {
  font-weight: bold;
}

/* Recolor  names to rainbow, and nnt to Italy */
a.-owner, a.- {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
/* NNT to 🇮🇹 */
a.-owner { color: var(----color); }
a[href="/s/508240"] {
  background: linear-gradient(to left, #ce2b37 0%, #ce2b37 35%, #f1f2f1 35%, #f1f2f1 65%, #009246 65%, #009246 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
/* Recolor Unbreakable to Kemo */
a.-owner { color: var(----color); }
a[href="/s/430030"] {
  background: #ffeac3;
  background: linear-gradient(to right, #ffeac3 0%,#ffeac3 33%,#889833 33%,#889833 66%,#993460 66%,#993460 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Change name colors back to oldbooru colors: approvers in green, s in orange */
a.-banned {color:red!important;}
a.-gold { color: var(---gold-color); }
a.-platinum { color: var(---platinum-color); }
a.-builder { color: var(---builder-color); }
a.-post-er { color: var(--magenta-3); }
.-tooltip-badge-contributor { background-color: var(--magenta-3) !important; }
a.-post-approver { color: var(----color); }
.-tooltip-badge-approver { background-color: var(----color) !important; }
a.- { color: var(--orange-3); }
.-tooltip-badge- { background-color: var(--orange-3) !important; }

/* Color rainbow animation for builders */
.-builder { color: #e6c9ff !important; animation: hue 5s infinite linear; }
@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}
.-contributor { color: #e6c9ff !important; animation: hue 5s infinite linear; }
@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

/*Show unrestricted  permission as underline*/
.-contributor { text-decoration:underline;}

/*Show approval permission green check mark*/
.-approver::after { content:"✓"; color:green; font-size:80%; display:inline-block; padding-left:0.5em;}

/*Show banned s with strikethrough*/
.-banned { text-decoration:line-through;}

/* Indicate whether a comment was bumped or not bumped */
.comment menu:before {
    font-size: 0.8em;
    font-weight: bold;
}

[data-do-not-bump-post="true"] menu:before {
   content: "(unbumped)";
   color: #C44;
}

[data-do-not-bump-post="false"] menu:before {
   content: "(bumped)";
   color: #0AA;
}

/* Spoiler ers in the modqueue */
#c-modqueue #content .:not(:hover) {
  background: black;
  color: black;
}

#c-modqueue img.h-4 {
  height: 2rem
}
#c-modqueue article .text-xs div {
  align-items: center; 
  display: flex;
}

/* Highlight posts with warning tags in the modqueue grid view
 * (The CSS doesn't include tags that implicate other warning tags)
 */
#c-modqueue .posts-container article[data-tags~='third-party_edit'],
#c-modqueue .posts-container article[data-tags~='screenshot'],
#c-modqueue .posts-container article[data-tags~='anime_screencap'],
#c-modqueue .posts-container article[data-tags~='duplicate'],
#c-modqueue .posts-container article[data-tags~='image_sample'],
#c-modqueue .posts-container article[data-tags~='md5_mismatch'],
#c-modqueue .posts-container article[data-tags~='resized'],
#c-modqueue .posts-container article[data-tags~='ai-generated']
{
  background-color: var(--modqueue-tag-warning-color) !important;
}

/* Hide the top danbooru logo and name */
#app-name-header { display: none }

/*Hide the top danbooru logo*/
#app-logo { display: none; }

/* Hide the Log Out button */
#subnav-log-out-link { display: none; }

/* Custom theme. Dark-orange dark-mode theme */
body.dark, body[data-current--theme="dark"] {
    --grey-0: #f6f6f6;
    --grey-1: #e8e8e8;
    --grey-2: #d1d1d1;
    --grey-3: #ababab;
    --grey-4: #919191;
    --grey-5: #777777;
    --grey-6: #5b5b5b;
    --grey-7: #3f3f3f;
    --grey-8: #2c2c2c;
    --grey-9: #191919;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-3);
    --header-color: var(--grey-2);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}

/* Custom theme. OLED dark-mode theme */
body.dark, body[data-current--theme="dark"] {
    --grey-0: #e8e8e8;
    --grey-1: #d1d1d1;
    --grey-2: #ababab;
    --grey-3: #919191;
    --grey-4: #777777;
    --grey-5: #5b5b5b;
    --grey-6: #3f3f3f;
    --grey-7: #2c2c2c;
    --grey-8: #191919;
    --grey-9: #000000;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-2);
    --header-color: var(--grey-1);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}

/* Custom theme. Grey/dark on desktop, OLED dark on mobile */
body.dark, body[data-current--theme="dark"] {
    --grey-0: #f6f6f6;
    --grey-1: #e8e8e8;
    --grey-2: #d1d1d1;
    --grey-3: #ababab;
    --grey-4: #919191;
    --grey-5: #777777;
    --grey-6: #5b5b5b;
    --grey-7: #3f3f3f;
    --grey-8: #2c2c2c;
    --grey-9: #191919;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-3);
    --header-color: var(--grey-2);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}

@media (max-width: 660px) {
    body.dark, body[data-current--theme="dark"] {
    --grey-0: #e8e8e8;
    --grey-1: #d1d1d1;
    --grey-2: #ababab;
    --grey-3: #919191;
    --grey-4: #777777;
    --grey-5: #5b5b5b;
    --grey-6: #3f3f3f;
    --grey-7: #2c2c2c;
    --grey-8: #191919;
    --grey-9: #000000;
    
    --text-color: var(--grey-2);
    --header-color: var(--grey-1);
}

/* =========== Color Palettes =========== */
/*
 *
 *  𝗖 𝗢 𝗟 𝗢 𝗥
 *  v 1.9.1
 *
 *  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

  /*  General
   *  ─────────────────────────────────── */

  --oc-white: #ffffff;
  --oc-black: #000000;


  /*  Gray
   *  ─────────────────────────────────── */

  --oc-gray-0: #f8f9fa;
  --oc-gray-1: #f1f3f5;
  --oc-gray-2: #e9ecef;
  --oc-gray-3: #dee2e6;
  --oc-gray-4: #ced4da;
  --oc-gray-5: #adb5bd;
  --oc-gray-6: #868e96;
  --oc-gray-7: #495057;
  --oc-gray-8: #343a40;
  --oc-gray-9: #212529;


  /*  Red
   *  ─────────────────────────────────── */

  --oc-red-0: #fff5f5;
  --oc-red-1: #ffe3e3;
  --oc-red-2: #ffc9c9;
  --oc-red-3: #ffa8a8;
  --oc-red-4: #ff8787;
  --oc-red-5: #ff6b6b;
  --oc-red-6: #fa5252;
  --oc-red-7: #f03e3e;
  --oc-red-8: #e03131;
  --oc-red-9: #c92a2a;


  /*  Pink
   *  ─────────────────────────────────── */

  --oc-pink-0: #fff0f6;
  --oc-pink-1: #ffdeeb;
  --oc-pink-2: #fcc2d7;
  --oc-pink-3: #faa2c1;
  --oc-pink-4: #f783ac;
  --oc-pink-5: #f06595;
  --oc-pink-6: #e64980;
  --oc-pink-7: #d6336c;
  --oc-pink-8: #c2255c;
  --oc-pink-9: #a61e4d;


  /*  Grape
   *  ─────────────────────────────────── */

  --oc-grape-0: #f8f0fc;
  --oc-grape-1: #f3d9fa;
  --oc-grape-2: #eebefa;
  --oc-grape-3: #e599f7;
  --oc-grape-4: #da77f2;
  --oc-grape-5: #cc5de8;
  --oc-grape-6: #be4bdb;
  --oc-grape-7: #ae3ec9;
  --oc-grape-8: #9c36b5;
  --oc-grape-9: #862e9c;


  /*  Violet
   *  ─────────────────────────────────── */

  --oc-violet-0: #f3f0ff;
  --oc-violet-1: #e5dbff;
  --oc-violet-2: #d0bfff;
  --oc-violet-3: #b197fc;
  --oc-violet-4: #9775fa;
  --oc-violet-5: #845ef7;
  --oc-violet-6: #7950f2;
  --oc-violet-7: #7048e8;
  --oc-violet-8: #6741d9;
  --oc-violet-9: #5f3dc4;


  /*  Indigo
   *  ─────────────────────────────────── */

  --oc-indigo-0: #edf2ff;
  --oc-indigo-1: #dbe4ff;
  --oc-indigo-2: #bac8ff;
  --oc-indigo-3: #91a7ff;
  --oc-indigo-4: #748ffc;
  --oc-indigo-5: #5c7cfa;
  --oc-indigo-6: #4c6ef5;
  --oc-indigo-7: #4263eb;
  --oc-indigo-8: #3b5bdb;
  --oc-indigo-9: #364fc7;


  /*  Blue
   *  ─────────────────────────────────── */

  --oc-blue-0: #e7f5ff;
  --oc-blue-1: #d0ebff;
  --oc-blue-2: #a5d8ff;
  --oc-blue-3: #74c0fc;
  --oc-blue-4: #4dabf7;
  --oc-blue-5: #339af0;
  --oc-blue-6: #228be6;
  --oc-blue-7: #1c7ed6;
  --oc-blue-8: #1971c2;
  --oc-blue-9: #1864ab;


  /*  Cyan
   *  ─────────────────────────────────── */

  --oc-cyan-0: #e3fafc;
  --oc-cyan-1: #c5f6fa;
  --oc-cyan-2: #99e9f2;
  --oc-cyan-3: #66d9e8;
  --oc-cyan-4: #3bc9db;
  --oc-cyan-5: #22b8cf;
  --oc-cyan-6: #15aabf;
  --oc-cyan-7: #1098ad;
  --oc-cyan-8: #0c8599;
  --oc-cyan-9: #0b7285;


  /*  Teal
   *  ─────────────────────────────────── */

  --oc-teal-0: #e6fcf5;
  --oc-teal-1: #c3fae8;
  --oc-teal-2: #96f2d7;
  --oc-teal-3: #63e6be;
  --oc-teal-4: #38d9a9;
  --oc-teal-5: #20c997;
  --oc-teal-6: #12b886;
  --oc-teal-7: #0ca678;
  --oc-teal-8: #099268;
  --oc-teal-9: #087f5b;


  /*  Green
   *  ─────────────────────────────────── */

  --oc-green-0: #ebfbee;
  --oc-green-1: #d3f9d8;
  --oc-green-2: #b2f2bb;
  --oc-green-3: #8ce99a;
  --oc-green-4: #69db7c;
  --oc-green-5: #51cf66;
  --oc-green-6: #40c057;
  --oc-green-7: #37b24d;
  --oc-green-8: #2f9e44;
  --oc-green-9: #2b8a3e;


  /*  Lime
   *  ─────────────────────────────────── */

  --oc-lime-0: #f4fce3;
  --oc-lime-1: #e9fac8;
  --oc-lime-2: #d8f5a2;
  --oc-lime-3: #c0eb75;
  --oc-lime-4: #a9e34b;
  --oc-lime-5: #94d82d;
  --oc-lime-6: #82c91e;
  --oc-lime-7: #74b816;
  --oc-lime-8: #66a80f;
  --oc-lime-9: #5c940d;


  /*  Yellow
   *  ─────────────────────────────────── */

  --oc-yellow-0: #fff9db;
  --oc-yellow-1: #fff3bf;
  --oc-yellow-2: #ffec99;
  --oc-yellow-3: #ffe066;
  --oc-yellow-4: #ffd43b;
  --oc-yellow-5: #fcc419;
  --oc-yellow-6: #fab005;
  --oc-yellow-7: #f59f00;
  --oc-yellow-8: #f08c00;
  --oc-yellow-9: #e67700;


  /*  Orange
   *  ─────────────────────────────────── */

  --oc-orange-0: #fff4e6;
  --oc-orange-1: #ffe8cc;
  --oc-orange-2: #ffd8a8;
  --oc-orange-3: #ffc078;
  --oc-orange-4: #ffa94d;
  --oc-orange-5: #ff922b;
  --oc-orange-6: #fd7e14;
  --oc-orange-7: #f76707;
  --oc-orange-8: #e8590c;
  --oc-orange-9: #d9480f;
}

html,
body[data-current--theme="light"] {
  --body-background-color: var(--oc-pink-0);
  --text-color: var(--oc-pink-9);

  --inverse-text-color: var(--oc-pink-0);
  --muted-text-color: var(--oc-pink-7);
  --header-color: var(--grey-9);
  --link-color: var(--oc-red-6);
  --link-hover-color: var(--oc-red-4);

  --default-border-color: var(--oc-pink-1);

  --success-color: var(--oc-green-5);
  --warning-color: var(--oc-yellow-3);
  --error-color: var(--oc-red-7);

  --success-hover-color: var(--oc-green-3);
  --warning-hover-color: var(--oc-yellow-2);
  --error-hover-color: var(--oc-red-5);

  --error-background-color: var(--oc-red-2);
  --success-background-color: var(--oc-green-1);
  --target-background: var(--oc-yellow-0);

  --subnav-menu-background-color: var(--oc-pink-1);
  --responsive-menu-background-color: var(--oc-pink-1);

  --card-background-color: var(--body-background-color);

  --form-input-text-color: var(--text-color);
  --form-input-background: var(--body-background-color);
  --form-input-border-color: var(--oc-pink-2);
  --form-input-placeholder-text-color: var(--oc-pink-4);
  --form-input-validation-error-border-color: var(--oc-red-4);
  --form-input-validation-error-text-color: var(--oc-red-6);

  --form-button-text-color: var(--text-color);
  --form-button-disabled-text-color: var(--oc-pink-5);
  --form-button-background: var(--oc-pink-1);
  --form-button-border-color: var(--oc-pink-2);
  --form-button-hover-background: var(--oc-pink-0);
  --form-button-hover-box-shadow-color: var(--oc-pink-5);
  --form-button-active-background: var(--oc-pink-2);

  --button-text-color: var(--inverse-text-color);
  --button-disabled-color: var(--muted-text-color);

  --button-primary-background-color: var(--link-color);
  --button-primary-hover-background-color: var(--link-hover-color);

  --button-danger-background-color: var(--warning-color);
  --button-danger-hover-background-color: var(--warning-hover-color);

  --button-outline-primary-color: var(--link-color);
  --button-outline-danger-color: var(--warning-hover-color);

  --quick-search-form-background: var(--body-background-color);

  /* To–Do But Irrelevant */
  /*
  ---upgrade-basic-background-color: var(--blue-0);
  ---upgrade-gold-background-color: var(--yellow-1);
  ---upgrade-platinum-background-color: var(--blue-1);
  */

  /*
  --table-header-border-color: var(--grey-6);
  --table-row-border-color: var(--grey-2);
  --table-row-hover-background: var(--blue-1);
  --table-even-row-background: var(--grey-0);

  --preview-pending-color: var(--blue-5);
  --preview-flagged-color: var(--red-5);
  --preview-deleted-color: var(--grey-9);
  --preview-has-children-color: var(--green-3);
  --preview-has-parent-color: var(--yellow-3);
  --preview-selected-color: rgba(0 0 0 / 15%);

  --preview-icon-color: var(--inverse-text-color);
  --preview-icon-background: rgba(0 0 0 / 70%);

  --media-asset-placeholder-background-color: var(--grey-1);

  --modqueue-tag-warning-color: var(--red-1);

  --s-dropzone-background: var(--grey-1);
  --s-dropzone-progress-bar-foreground-color: var(--link-color);
  --s-dropzone-progress-bar-background-color: var(--link-hover-color);

  --forum-vote-up-color: var(--green-5);
  --forum-vote-meh-color: var(--orange-3);
  --forum-vote-down-color: var(--red-5);

  --forum-topic-status-new-color: var(--red-5);
  --forum-topic-status-pending-color: var(--blue-5);
  --forum-topic-status-approved-color: var(--green-5);
  --forum-topic-status-rejected-color: var(--red-5);

  --moderation-report-text-color: var(--red-5);
  --moderation-report-background-color: var(--red-1);

  --comment-sticky-background-color: var(--blue-0);

  --post-tooltip-background-color: var(--body-background-color);
  --post-tooltip-border-color: var(--grey-2);
  --post-tooltip-header-background-color: var(--blue-0);
  --post-tooltip-info-color: var(--muted-text-color);

  --post-tooltip-scrollbar-background: var(--grey-4);
  --post-tooltip-scrollbar-thumb-color: var(--grey-5);
  --post-tooltip-scrollbar-track-background: var(--grey-1);

  ---tooltip-positive--color: var(--orange-3);
  ---tooltip-negative--color: var(--red-5);

  --autocomplete-selected-background-color: var(--blue-1);
  --autocomplete-border-color: var(--grey-2);
  --autocomplete-tag-autocorrect-underline: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==");

  --diff-list-added-color: var(--green-5);
  --diff-list-removed-color: var(--red-5);
  --diff-list-obsolete-added-color: var(--green-7);
  --diff-list-obsolete-removed-color: var(--red-7);

  --wiki-page-versions-diff-del-background: var(--red-2);
  --wiki-page-versions-diff-ins-background: var(--green-2);

  --post-notice-border-color: var(--grey-2);
  --post-parent-notice-background: var(--green-0);
  --post-child-notice-background: var(--yellow-0);
  --post-pending-notice-background: var(--blue-1);
  --post-banned-notice-background: var(--red-1);
  --post-deleted-notice-background: var(--red-1);
  --post-resized-notice-background: var(--magenta-1);
  --post-search-notice-background: var(--grey-1);

  --post-artist-commentary-container-background: var(--grey-0);
  --post-artist-commentary-container-border-color: var(--grey-1);

  --post-upvote-color: var(--link-color);
  --post-downvote-color: var(--red-5);

  --note-body-background: #ffffee;
  --note-body-text-color: var(--black);
  --note-body-border-color: var(--black);
  --note-box-border-color: var(--black);
  --note-box-shadow: 0 0 0 1px white;

  --unsaved-note-box-border-color: var(--red-4);
  --movable-note-box-border-color: var(--blue-5);
  --note-preview-border-color: var(--red-4);
  --note-preview-background: var(--note-body-background);
  --note-highlight-color: var(--blue-5);
  --note-tn-color: var(--muted-text-color);

  --series-pool-color: var(--copyright-tag-color);
  --series-pool-hover-color: var(--copyright-tag-hover-color);

  --collection-pool-color: var(--general-tag-color);
  --collection-pool-hover-color: var(--general-tag-hover-color);

  --fetch-source-data-border-color: var(--grey-2);

  --post-mode-menu-active-post-outline-color: var(--blue-2);
  --post-mode-menu-translation-background: var(--blue-2);

  --tag-count-color: var(--muted-text-color);
  --low-post-count-color: var(--red-5);

  --remove-favorite-button: var(--red-4);

  --ugoira-seek-slider-background: var(--grey-0);
  --ugoira-seek-slider-progressbar-background: var(--white);

  --keyboard-shortcut-color: var(--inverse-text-color);
  --keyboard-shortcut-background-color: var(--grey-6);

  ---link-color: var(--red-5);
  --footer-border-color: var(--grey-1);
  --divider-border-color: var(--grey-1);
  --divider-border-hover-color: var(--grey-3);

  --jquery-ui-widget-content-background: var(--body-background-color);
  --jquery-ui-widget-content-text-color: var(--text-color);

  --notice-error-background: var(--red-1);
  --notice-error-border-color: var(--red-2);
  --notice-info-background: var(--yellow-0);
  --notice-info-border-color: var(--yellow-1);

  --dtext-blockquote-border-color: var(--grey-4);
  --dtext-hr-color: var(--grey-2);
  --dtext-code-background: var(--grey-1);
  --dtext-details-background-color: var(--grey-0);
  --dtext-details-summary-background-color: var(--grey-1);
  --dtext-details-summary-hover-background-color: var(--grey-2);
  --dtext-details-summary-text-color: var(--header-color);
  --dtext-spoiler-background-color: var(--text-color);
  --dtext-spoiler-hover-color: var(--inverse-text-color);

  --wiki-page-other-name-background-color: var(--grey-1);

  --paginator-arrow-background-color: var(--inverse-text-color);
  --paginator-arrow-color: var(--link-color);

  --asset-paginator-link-color: var(--link-color);
  --asset-paginator-link-hover-color: var(--link-color);
  --asset-paginator-background-color: var(--white);
  --asset-paginator-background-hover-color: var(--white);

  --artist-tag-color: var(--red-6);
  --artist-tag-hover-color: var(--red-5);
  --copyright-tag-color: var(--magenta-6);
  --copyright-tag-hover-color: var(--magenta-5);
  --character-tag-color: var(--green-4);
  --character-tag-hover-color: var(--green-3);
  --general-tag-color: var(--link-color);
  --general-tag-hover-color: var(--link-hover-color);
  --meta-tag-color: var(--orange-3);
  --meta-tag-hover-color: var(--orange-2);

  ----color: var(--red-5);
  ----color: var(--character-tag-color);
  ---builder-color: var(--copyright-tag-color);
  ---platinum-color: var(--grey-5);
  ---gold-color: var(--meta-tag-color);
  ---member-color: var(--general-tag-color);
  ---restricted-color: var(--general-tag-color);
  ---banned-color: var(--grey-8);

  ---verified-email-color: var(--green-4);
  ---unverified-email-color: var(--yellow-2);

  --news-updates-background: var(--grey-0);
  --news-updates-border-color: var(--grey-1);

  --inactive-artist-url-color: var(--red-6);
  --inactive-artist-url-hover-color: var(--red-5);
  --banned-artist-label-color: var(--red-5);
  --deleted-artist-label-color: var(--grey-6);
  */
}

/* variables that aren't defined in the dark theme fall back to the :root theme */
/*
@mixin dark-theme {
  --body-background-color: var(--grey-9);
  --text-color: var(--grey-2);

  --inverse-text-color: var(--grey-0);
  --muted-text-color: var(--grey-4);
  --header-color: var(--grey-1);
  --link-color: var(--azure-4);
  --link-hover-color: var(--azure-3);

  --success-color: var(--green-4);
  --warning-color: var(--yellow-3);
  --error-color: var(--red-4);

  --success-hover-color: var(--green-3);
  --warning-hover-color: var(--yellow-2);
  --error-hover-color: var(--red-3);

  --default-border-color: var(--grey-7);

  --error-background-color: var(--red-9);
  --success-background-color: var(--green-9);
  --target-background: var(--azure-8);

  --subnav-menu-background-color: var(--grey-8);
  --responsive-menu-background-color: var(--grey-8);

  --card-background-color: var(--grey-8);

  --form-input-text-color: var(--grey-2);
  --form-input-background: var(--grey-7);
  --form-input-border-color: var(--grey-5);
  --form-input-placeholder-text-color: var(--grey-3);
  --form-input-validation-error-border-color: var(--red-4);
  --form-input-validation-error-text-color: var(--red-5);

  --form-button-text-color: var(--grey-9);
  --form-button-disabled-text-color: var(--grey-5);
  --form-button-background: var(--grey-2);
  --form-button-border-color: var(--grey-4);
  --form-button-hover-background: var(--grey-0);
  --form-button-hover-box-shadow-color: var(--grey-5);
  --form-button-active-background: var(--grey-3);

  --button-text-color: var(--white);
  --button-disabled-color: var(--grey-4);

  --button-primary-background-color: var(--link-color);
  --button-primary-hover-background-color: var(--link-hover-color);

  --button-danger-background-color: var(--red-4);
  --button-danger-hover-background-color: var(--red-3);

  --button-outline-primary-color: var(--azure-4);
  --button-outline-danger-color: var(--red-4);

  --quick-search-form-background: var(--grey-9);

  ---upgrade-basic-background-color: var(--grey-8);
  ---upgrade-gold-background-color: var(--grey-7);
  ---upgrade-platinum-background-color: var(--blue-9);

  --table-header-border-color: var(--grey-7);
  --table-row-border-color: var(--grey-7);
  --table-even-row-background: var(--grey-8);
  --table-row-hover-background: var(--grey-7);

  --preview-pending-color: var(--azure-4);
  --preview-flagged-color: var(--red-5);
  --preview-deleted-color: var(--grey-3);
  --preview-has-children-color: var(--green-3);
  --preview-has-parent-color: var(--orange-3);
  --preview-selected-color: rgba(255 255 255 / 25%);

  --media-asset-placeholder-background-color: var(--grey-8);

  --modqueue-tag-warning-color: var(--red-7);

  --s-dropzone-background: var(--grey-7);
  --s-dropzone-progress-bar-foreground-color: var(--link-color);
  --s-dropzone-progress-bar-background-color: var(--link-hover-color);

  --forum-vote-up-color: var(--green-4);
  --forum-vote-meh-color: var(--yellow-2);
  --forum-vote-down-color: var(--red-4);

  --forum-topic-status-new-color: var(--red-3);
  --forum-topic-status-pending-color: var(--azure-3);
  --forum-topic-status-approved-color: var(--green-3);
  --forum-topic-status-rejected-color: var(--red-3);

  --moderation-report-text-color: var(--red-4);
  --moderation-report-background-color: var(--red-9);

  --comment-sticky-background-color: var(--azure-8);

  --post-tooltip-background-color: var(--grey-8);
  --post-tooltip-border-color: var(--grey-7);
  --post-tooltip-header-background-color: var(--grey-8);
  --post-tooltip-info-color: var(--grey-2);

  --post-tooltip-scrollbar-background: var(--grey-4);
  --post-tooltip-scrollbar-thumb-color: var(--grey-5);
  --post-tooltip-scrollbar-track-background: var(--grey-1);

  ---tooltip-positive--color: var(--yellow-1);
  ---tooltip-negative--color: var(--red-1);

  --autocomplete-selected-background-color: var(--grey-7);
  --autocomplete-border-color: var(--grey-4);

  --diff-list-added-color: var(--green-4);
  --diff-list-removed-color: var(--red-4);
  --diff-list-obsolete-added-color: var(--green-6);
  --diff-list-obsolete-removed-color: var(--red-6);

  --wiki-page-versions-diff-del-background: var(--red-8);
  --wiki-page-versions-diff-ins-background: var(--green-8);

  --post-notice-border-color: var(--grey-7);
  --post-parent-notice-background: var(--green-8);
  --post-child-notice-background: var(--yellow-8);
  --post-pending-notice-background: var(--blue-8);
  --post-banned-notice-background: var(--red-8);
  --post-deleted-notice-background: var(--red-8);
  --post-resized-notice-background: var(--purple-8);
  --post-search-notice-background: var(--grey-8);

  --post-artist-commentary-container-background: var(--grey-8);
  --post-artist-commentary-container-border-color: var(--grey-7);

  --post-upvote-color: var(--link-color);
  --post-downvote-color: var(--red-4);

  --unsaved-note-box-border-color: var(--red-5);
  --movable-note-box-border-color: var(--blue-5);
  --note-preview-border-color: var(--red-5);
  --note-highlight-color: var(--blue-5);

  --series-pool-color: var(--copyright-tag-color);
  --series-pool-hover-color: var(--copyright-tag-hover-color);

  --collection-pool-color: var(--general-tag-color);
  --collection-pool-hover-color: var(--general-tag-hover-color);

  --fetch-source-data-border-color: var(--grey-4);

  --post-mode-menu-active-post-outline-color: var(--azure-4);
  --post-mode-menu-translation-background: var(--blue-8);

  --low-post-count-color: var(--red-4);

  --remove-favorite-button: var(--red-4);

  --ugoira-seek-slider-background: var(--grey-2);
  --ugoira-seek-slider-progressbar-background: var(--grey-0);

  --keyboard-shortcut-color: var(--grey-0);
  --keyboard-shortcut-background-color: var(--grey-7);

  ---link-color: var(--red-4);
  --footer-border-color: var(--grey-7);
  --divider-border-color: var(--grey-7);
  --divider-border-hover-color: var(--grey-6);

  --jquery-ui-widget-content-text-color: var(--text-color);
  --jquery-ui-widget-content-background: var(--grey-8);

  --notice-error-background: var(--red-8);
  --notice-error-border-color: var(--red-7);
  --notice-info-background: var(--azure-8);
  --notice-info-border-color: var(--azure-6);

  --dtext-blockquote-border-color: var(--grey-4);
  --dtext-hr-color: var(--grey-7);
  --dtext-code-background: var(--grey-8);
  --dtext-details-background-color: var(--grey-8);
  --dtext-details-summary-background-color: var(--grey-7);
  --dtext-details-summary-hover-background-color: var(--grey-6);
  --dtext-details-summary-text-color: var(--text-color);
  --dtext-spoiler-background-color: black;
  --dtext-spoiler-hover-color: var(--grey-0);

  --wiki-page-other-name-background-color: var(--grey-8);

  --paginator-arrow-background-color: var(--grey-0);
  --paginator-arrow-color: var(--link-color);

  --asset-paginator-link-color: var(--white);
  --asset-paginator-link-hover-color: var(--white);
  --asset-paginator-background-color: var(--grey-9);
  --asset-paginator-background-hover-color: var(--grey-8);

  --artist-tag-color: var(--red-3);
  --artist-tag-hover-color: var(--red-2);
  --copyright-tag-color: var(--purple-3);
  --copyright-tag-hover-color: var(--purple-2);
  --character-tag-color: var(--green-3);
  --character-tag-hover-color: var(--green-2);
  --general-tag-color: var(--azure-4);
  --general-tag-hover-color: var(--azure-3);
  --meta-tag-color: var(--yellow-2);
  --meta-tag-hover-color: var(--yellow-1);

  ----color: var(--artist-tag-color);
  ----color: var(--character-tag-color);
  ---builder-color: var(--copyright-tag-color);
  ---platinum-color: var(--grey-3);
  ---gold-color: var(--meta-tag-color);
  ---member-color: var(--general-tag-color);
  ---restricted-color: var(--general-tag-color);
  ---banned-color: var(--grey-6);

  ---verified-email-color: var(--green-3);
  ---unverified-email-color: var(--yellow-2);

  --news-updates-background: var(--grey-7);
  --news-updates-border-color: var(--grey-6);

  --inactive-artist-url-color: var(--red-4);
  --inactive-artist-url-hover-color: var(--red-3);
  --banned-artist-label-color: var(--red-5);
  --deleted-artist-label-color: var(--grey-6);
}

body[data-current--theme="dark"] {
  @include dark-theme;
}

@media (prefers-color-scheme: dark) {
  body {
    @include dark-theme;
  }
}
*/


/* =========== Styles =========== */

/* Base styles & variables */

:root {
  --base-border-radius: .7em;
}

/* Rainbow staff names */
a.-owner,
a.- {
  background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(300, 100%, 50%));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: hue 5s infinite linear;
}

@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(360deg);
  }
}


/* Round fav button */
div#c-posts .fav-buttons button.ui-button {
  padding: .5em;
  border-radius: 100%;
  height: 42px;
  width: 42px;
}

/* Danbooru Logo */
header#top #app-name-header,
#app-name {
  color: var(--red-5);
  font-family: "Gabriola", "Segoe Print", cursive, ui-sans-serif, sans-serif;
}


#app-name {
  color: var(--red-7);
}

header#top nav#nav li.current>a {
  border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
}

header#top nav#nav menu#subnav-menu {
  border-radius: var(--base-border-radius);
}

section#search-box form #tags {
  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
}

section#search-box form button#search-box-submit {
  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}

.notice,
div#c-posts div#a-show section#content #artist-commentary,
#content>section.image-container picture>img,
.post-gallery img.post-preview-image,
img.post-preview-image,
input,
input[type=submit],
select,
textarea {
  border-radius: var(--base-border-radius);
}

/* ugly hack to fix awkward overflow on initial sizes… please send help */
.prose::after {
  content: "\00a0";
}

/* Custom theme. Pink pastel light theme */
a.-owner,
a.- {
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root {
  --body-font: cursive;
}

html {
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
}

html, body[data-current--theme="light"] {
  --body-background-color: var(--pink-0);
  --text-color: var(--pink-9);

  --inverse-text-color: var(--pink-0);
  --muted-text-color: var(--pink-7);
  --header-color: var(--text-color);

  --link-color: var(--red-6);
  --link-hover-color: var(--red-4);

  --default-border-color: var(--pink-1);

  --error-background-color: var(--red-1);
  --success-background-color: var(--green-1);
  --target-background: var(--yellow-0);

  --subnav-menu-background-color: var(--pink-1);
  --responsive-menu-background-color: var(--pink-1);

  --form-input-text-color: var(--text-color);
  --form-input-background: var(--body-background-color);
  --form-input-border-color: var(--pink-2);
  --form-input-placeholder-text-color: var(--pink-4);
  --form-input-validation-error-border-color: var(--red-4);
  --form-input-validation-error-text-color: var(--red-5);

  --form-button-text-color: var(--text-color);
  --form-button-disabled-text-color: var(--pink-5);
  --form-button-background: var(--pink-1);
  --form-button-border-color: var(--pink-2);
  --form-button-hover-background: var(--pink-0);
  --form-button-hover-box-shadow-color: var(--pink-5);
  --form-button-active-background: var(--pink-2);

  --button-primary-text-color: var(--white);
  --button-primary-background-color: var(--link-color);
  --button-primary-hover-background-color: var(--link-hover-color);
  --button-primary-disabled-color: var(--pink-5);
  --button-outline-primary-color: var(--link-color);

  --quick-search-form-background: var(--body-background-color);

  ---upgrade-basic-background-color: var(--blue-0);
  ---upgrade-gold-background-color: var(--yellow-1);
  ---upgrade-platinum-background-color: var(--blue-1);

  --table-header-border-color: var(--pink-6);
  --table-row-border-color: var(--pink-2);
  --table-row-hover-background: var(--purple-1);
  --table-even-row-background: var(--pink-1);

  --preview-pending-color: var(--blue-5);
  --preview-flagged-color: var(--red-5);
  --preview-deleted-color: var(--grey-9);
  --preview-has-children-color: var(--green-3);
  --preview-has-parent-color: var(--yellow-3);
  --preview-selected-color: rgba(0, 0, 0, 0.15);

  --preview-icon-color: var(--inverse-text-color);
  --preview-icon-background: rgba(0, 0, 0, 0.7);

  --media-asset-placeholder-background-color: var(--pink-1);

  --modqueue-tag-warning-color: var(--red-1);

  --file--component-background-color: var(--body-background-color);
  --s-dropzone-background: var(--pink-1);
  --s-dropzone-progress-bar-foreground-color: var(--link-color);
  --s-dropzone-progress-bar-background-color: var(--link-hover-color);

  --forum-vote-up-color: var(--green-5);
  --forum-vote-meh-color: var(--orange-3);
  --forum-vote-down-color: var(--red-5);

  --forum-topic-status-new-color: var(--red-5);
  --forum-topic-status-pending-color: var(--blue-5);
  --forum-topic-status-approved-color: var(--green-5);
  --forum-topic-status-rejected-color: var(--red-5);

  --moderation-report-text-color: var(--red-5);
  --moderation-report-background-color: var(--red-1);

  --comment-sticky-background-color: var(--blue-0);

  --post-tooltip-background-color: var(--body-background-color);
  --post-tooltip-border-color: var(--pink-2);
  --post-tooltip-header-background-color: var(--pink-0);
  --post-tooltip-info-color: var(--muted-text-color);

  --post-tooltip-scrollbar-background: var(--pink-4);
  --post-tooltip-scrollbar-thumb-color: var(--pink-5);
  --post-tooltip-scrollbar-track-background: var(--pink-1);

  ---tooltip-positive--color: var(--orange-3);
  ---tooltip-negative--color: var(--red-5);

  --autocomplete-selected-background-color: var(--purple-1);
  --autocomplete-border-color: var(--pink-2);
  --autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==);

  --diff-list-added-color: var(--green-5);
  --diff-list-removed-color: var(--red-5);
  --diff-list-obsolete-added-color: var(--green-7);
  --diff-list-obsolete-removed-color: var(--red-7);

  --wiki-page-versions-diff-del-background: var(--red-2);
  --wiki-page-versions-diff-ins-background: var(--green-2);

  --post-notice-border-color: var(--grey-2);
  --post-parent-notice-background: var(--green-0);
  --post-child-notice-background: var(--yellow-0);
  --post-pending-notice-background: var(--blue-1);
  --post-banned-notice-background: var(--red-1);
  --post-deleted-notice-background: var(--red-1);
  --post-resized-notice-background: var(--magenta-1);
  --post-search-notice-background: var(--pink-1);

  --post-artist-commentary-container-background: var(--pink-0);
  --post-artist-commentary-container-border-color: var(--pink-1);

  --post-upvote-color: var(--link-color);
  --post-downvote-color: var(--red-5);

  --note-body-background: #FFE;
  --note-body-text-color: var(--black);
  --note-body-border-color: var(--black);
  --note-box-border-color: var(--black);
  --note-box-shadow: 0 0 0 1px white;

  --unsaved-note-box-border-color: var(--red-4);
  --movable-note-box-border-color: var(--blue-5);
  --note-preview-border-color: var(--red-4);
  --note-preview-background: var(--note-body-background);
  --note-highlight-color: var(--blue-5);
  --note-tn-color: var(--muted-text-color);

  --series-pool-color: var(--copyright-tag-color);
  --series-pool-hover-color: var(--copyright-tag-hover-color);

  --collection-pool-color: var(--general-tag-color);
  --collection-pool-hover-color: var(--general-tag-hover-color);

  --fetch-source-data-border-color: var(--pink-2);

  --post-mode-menu-active-post-outline-color: var(--purple-2);
  --post-mode-menu-translation-background: var(--purple-2);

  --tag-count-color: var(--muted-text-color);
  --low-post-count-color: var(--red-5);

  --remove-favorite-button: var(--red-4);

  --ugoira-seek-slider-background: var(--purple-0);
  --ugoira-seek-slider-progressbar-background: var(--white);

  --keyboard-shortcut-color: var(--inverse-text-color);
  --keyboard-shortcut-background-color: var(--pink-6);

  ---link-color: var(--red-5);
  --footer-border-color: var(--pink-1);
  --divider-border-color: var(--pink-2);

  --jquery-ui-widget-content-background: var(--body-background-color);
  --jquery-ui-widget-content-text-color: var(--text-color);

  --notice-error-background: var(--red-1);
  --notice-error-border-color: var(--red-2);
  --notice-info-background: var(--yellow-0);
  --notice-info-border-color: var(--yellow-1);

  --dtext-blockquote-border-color: var(--purple-4);
  --dtext-code-background: var(--purple-1);
  --dtext-expand-border: 1px solid var(--purple-3);
  --dtext-spoiler-background-color: var(--text-color);
  --dtext-spoiler-hover-color: var(--inverse-text-color);

  --wiki-page-other-name-background-color: var(--purple-1);

  --paginator-arrow-background-color: var(--inverse-text-color);
  --paginator-arrow-color: var(--link-color);

  --artist-tag-color: var(--purple-6);
  --artist-tag-hover-color: var(--purple-5);
  --copyright-tag-color: var(--azure-6);
  --copyright-tag-hover-color: var(--azure-5);
  --character-tag-color: var(--green-6);
  --character-tag-hover-color: var(--green-5);
  --general-tag-color: var(--link-color);
  --general-tag-hover-color: var(--link-hover-color);
  --meta-tag-color: var(--orange-6);
  --meta-tag-hover-color: var(--orange-5);

  /*----color: var(--red-5);*/
  ----color: var(--character-tag-color);
  ---builder-color: var(--copyright-tag-color);
  ---platinum-color: var(--grey-7);
  ---gold-color: DarkGoldenrod;
  ---member-color: var(--general-tag-color);
  ---restricted-color: var(--pink-7);
  ---banned-color: Chocolate;

  ---verified-email-color: var(--green-4);
  ---unverified-email-color: var(--yellow-2);
  
  /* #TODO */
  --news-updates-background: var(--grey-0);
  --news-updates-border-color: var(--grey-1);

  --related-tags-container-background: var(--grey-0);
  --selected-related-tag-background-color: var(--link-color);
  --selected-related-tag-color: var(--inverse-text-color);

  --inactive-artist-url-color: var(--red-6);
  --inactive-artist-url-hover-color: var(--red-5);
  --banned-artist-label-color: var(--red-5);
  --deleted-artist-label-color: var(--grey-6);
}

div#c-posts .fav-buttons button.ui-button {
  padding: .5em;
  border-radius: 100%;
}

header#top #app-name-header {
  color: var(--red-5);
}

@keyframes huehue {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(100deg); }
  100% { filter: hue-rotate(0deg); }
}
a { animation: huehue 8s infinite;
}