:root {
  --color-bg: #0d0d0d;
  --color-bg-stripes: #0f1315;
  --color-bg-contrast: #d0d0d0;
  --opaque-color-bg-contrast: #d0d0d044;

  --color-text: #e4e4e4;
  --color-text-weak: #a4a4a4;
  --color-text-weaker: #4a5559;

  --color-good: #5ac467;
  --color-text-good: #accaaf;
  --opaque-color-good: #5ac46788;
  --color-bad:	#efbe8d;
  --color-text-bad: #e0d2c5;
  --opaque-color-bad: #efbe8d88;

  --color-grey: #2e3440;
  --color-grey-acc: #22272f;
  --color-rich-black: #1f2426;
  --color-rich-black-acc: #1c2022; /*! Unused */
}

span {
  color: var(--color-text);
}



/*# Background */

#background {
  background:
    repeating-linear-gradient(transparent 0 190px, var(--color-bg-stripes) 195px, transparent 200px),
    repeating-linear-gradient(90deg, var(--color-bg) 0 190px, var(--color-bg-stripes) 195px, var(--color-bg) 200px);
}

#c-modal::backdrop {
  background: 
    linear-gradient(170deg, transparent 20%, #5d576b20);
}

/*# END - Background */





:root {
  /* Kruta I am so sorry to steal your palette */
  --color-fixed: #322d4b;
  --color-fixed-accent: #4cc2fe;
}



/*# Header */

.o-header {
  background-color: var(--color-fixed);
  outline: 1px solid var(--color-fixed-accent);

  box-shadow: inset 0 0 15px -5px var(--color-fixed-accent);
}

.o-header::after {
  box-shadow: 4px 4px 10px var(--color-fixed-accent);
}

/*# END - Header */



/*# Sidebar Metapanel */

.o-sidebar-metapanel {
  background-color: var(--color-grey);
}

.c-metapanel-content > div {
  background-color: var(--color-grey-acc);
}

/*# END - Sidebar Metapanel*/





:root {
  --color-study-bg: #5b1415;
  --color-study: #f7310e;
  --color-study-acc: #a1160a;

  --color-study-grey: #3d3d3d;
  --color-study-grey-acc: #262626;

  --color-study-bg-available: #140c0d;
}



/*# Studies */

.c-prim-study-id {
  text-shadow: 0 0 5px var(--color-text);
}
.o-prim-study {
  text-shadow: 0 0 3px #000;
  box-shadow: inset 0px 0px 25px -3px #000a;
}

.o-prim-study::before {
  background-image: radial-gradient(transparent 0 90%, #0006 99% 100%);

  outline: 2px solid var(--color-study);
}

.o-prim-study--obfuscated {
  background-color: var(--color-rich-black);
}
.o-prim-study--obfuscated span {
  color: var(--color-text-weaker);
}

.o-prim-study--unavailable {
  background-color: var(--color-study-grey);
}
.o-prim-study--unavailable span {
  color: var(--color-text-weak);
}

.o-prim-study--unavailable .l-prim-study-header span {
  text-shadow: 0 0 15px var(--color-study-grey-acc);
}

.o-prim-study--unavailable::before {
  background-color: var(--color-study-grey-acc);
}

.o-prim-study--unavailable:hover {
  background-image:
    linear-gradient(transparent, var(--opaque-color-bad));
}
.o-prim-study--unavailable:hover span {
  color: var(--color-text-bad);
}

.o-prim-study--unavailable:hover::before {
  background-color: var(--color-bad);
}

.o-prim-study--available {
  background-color: var(--color-study-bg-available);
  background-image:
    linear-gradient(var(--opaque-color-bg-contrast) -50%, transparent);

  box-shadow: inset 0px 0px 25px -3px var(--color-study);
}
.o-prim-study--available span {
  color: var(--color-study);
}

.o-prim-study--available .l-prim-study-header span {
  text-shadow: 0 0 15px var(--color-study);
}

.o-prim-study--available:hover {
  background-image:
    linear-gradient(var(--opaque-color-bg-contrast) -50%, transparent),
    linear-gradient(transparent 10%, var(--color-study-acc) 120%);

  box-shadow: inset 0px 0px 25px -3px var(--color-bg-contrast);
}
.o-prim-study--available:hover span {
  color: var(--color-text);
}

.o-prim-study--bought {
  background-color: var(--color-study-bg);
}
.o-prim-study--bought span {
  color: var(--color-text);
}

.o-prim-study--bought .l-prim-study-header span {
  text-shadow: 0 0 18px var(--color-black);
}

.o-prim-study--bought::before {
  background-color: var(--color-study-acc);
}

/*# END - Studies */