/* ##################################################
# DEFAULT
################################################## */


.boom {
    font-weight: bold;
}

.flash {
    text-decoration: underline;
}

#light.theme-default img {
    filter: saturate(0) brightness(0);
}

#dark.theme-default img {
    filter: saturate(0) brightness(10);
}

#dark input[type=checkbox] {
    filter: invert(1) hue-rotate(180deg);
}


/* ##################################################
# MATRIX
################################################## */


.theme-matrix, .theme-matrix * {
    background-color: #4040ff;
    color: white;
    font-family: "VT323", monospace;
    font-weight: bold;
}

#light.theme-matrix * {
    border-color: white;
    border-width: 2px;
}

#light.theme-matrix input[type=checkbox] {
    filter: saturate(0) invert(1) brightness(5);
}

#dark.theme-matrix input[type=checkbox] {
    filter: invert(1) hue-rotate(85deg);
}

#light.theme-matrix img {
    background-color: transparent;
    filter: saturate(0) brightness(10);
}

#dark.theme-matrix img {
    filter: hue-rotate(120deg) brightness(5);
}

#dark.theme-matrix * {
    color: #00FF41;
}

.theme-matrix .boom {
    animation: glitch 2.5s 2;
}

.theme-matrix .flash {
    text-decoration: none;
    animation: glitch 2.5s;
}

@keyframes glitch{
  0% { color: inherit; transform: skew(0deg); }
  1% { color: red; transform: skew(-10deg); }
  2% { color: inherit; transform: skew(0deg); text-shadow: none; }
  4% { text-shadow: -3px -3px 0px cyan, 3px 3px 0px magenta; }
  6% { text-shadow: none; }

  13% { color: inherit; transform: skew(0deg); }
  15% { color: magenta; transform: skew(-10deg); }
  17% { color: inherit; transform: skew(0deg); }

  41% { color: inherit; transform: skew(0deg); }
  42% { color: red; transform: skew(10deg); }
  43% { color: inherit; transform: skew(0deg); }

  65% { text-shadow: none; }
  66% { text-shadow: -2px 2px 0px red, 2px -2px 0px cyan; }
  67% { color: inherit; transform: skew(0deg); text-shadow: none; }
  69% { color: magenta; transform: skew(10deg); }
  71% { color: inherit; transform: skew(0deg); }

  74% { color: inherit; transform: skew(0deg); }
  75% { color: red; transform: skew(-10deg); }
  76% { color: inherit; transform: skew(0deg); }
}


/* ##################################################
# RAINBOW
################################################## */


.theme-rainbow {
    background: linear-gradient(
        rgba(255,0,0,0.2) 0%, 
        rgba(255,154,0,0.2) 10%, 
        rgba(208,222,33,0.2) 20%, 
        rgba(79,220,74,0.2) 30%, 
        rgba(63,218,216,0.2) 40%, 
        rgba(47,201,226,0.2) 50%, 
        rgba(28,127,238,0.2) 60%, 
        rgba(95,21,242,0.2) 70%, 
        rgba(186,12,248,0.2) 80%, 
        rgba(251,7,217,0.2) 90%, 
        rgba(255,0,0,0.2) 100%
    ) 0 0/100% 200%;
    animation: rainbowShiftBg 30s linear infinite;
}

@keyframes rainbowShiftBg {
  to {background-position: 0 -200%}
}

.theme-rainbow :is(input, button, textarea, select):not(:hover):not(:active) {
    background: rgba(255, 255, 255, 0.25);
}

#dark.theme-rainbow {
    filter: brightness(2);
}

#dark.theme-rainbow *:not(select) {
    background-color: transparent;
}

.theme-rainbow * {
    font-family: Arial, Helvetica, sans-serif;
    border-color: orangered !important;
}

.theme-rainbow *:not(select):not(option) {
    color: red !important;
}

.theme-rainbow > * {
    animation: rainbowShiftHue 2.5s linear infinite;
}

@keyframes rainbowShiftHue {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
}

.theme-rainbow :nth-child(9n + 0) { filter: hue-rotate(0deg); }
.theme-rainbow :nth-child(9n + 1) { filter: hue-rotate(40deg); }
.theme-rainbow :nth-child(9n + 2) { filter: hue-rotate(80deg); }
.theme-rainbow :nth-child(9n + 3) { filter: hue-rotate(120deg); }
.theme-rainbow :nth-child(9n + 4) { filter: hue-rotate(160deg); }
.theme-rainbow :nth-child(9n + 5) { filter: hue-rotate(200deg); }
.theme-rainbow :nth-child(9n + 6) { filter: hue-rotate(240deg); }
.theme-rainbow :nth-child(9n + 7) { filter: hue-rotate(280deg); }
.theme-rainbow :nth-child(9n + 8) { filter: hue-rotate(320deg); }

#light.theme-rainbow .boom, #light.theme-rainbow .flash {
    color: white !important;
    text-decoration: none;
    background: yellow !important;
}

#dark.theme-rainbow .boom, #dark.theme-rainbow .flash {
    color: black !important;
    text-decoration: none;
    background: red !important;
}