:root {
  --background-color: rgb(30, 25, 36);
  --accent-background-color: rgb(38, 32, 46);
  --accent-dark: rgb(46, 39, 56);
  --accent-dark-transparent: rgba(46, 39, 56, 0.5);
  --accent-medium: rgb(53, 44, 64);
  --accent-medium-transparent: rgba(53, 44, 64, 0.5);
  --accent-light: rgb(64, 53, 77);
  --accent-light-transparent: rgba(64, 53, 77, 0.5);
  --text-color: rgb(160, 160, 160);
  --accent-border-color: white;
  --unit-description-clear: rgba(53, 44, 64, 0);
  --unit-description-background: rgba(53, 44, 64, 0.9);
}

/* HEADER       */
div#header {
  background-color: rgb(42, 35, 51);
}
div.header-nav-button:hover {
  background-color: rgb(55, 46, 66);
  border: 1px solid rgb(49, 40, 59);
}

div.header-logo {
  background-color: rgb(160, 50, 255);
  border: 1px solid rgb(160, 0, 255);
}

div.class-picture > img,
div.origin-picture > img {
  filter: sepia(100%) hue-rotate(200deg);
}


/* Galaxies Colors And Accents*/
body {
  color: var(--text-color);
  background: linear-gradient(to right, rgba(30, 25, 36, 0.9) 0%, rgba(30, 25, 36, 0.9) 100%), url("../../pictures/champions/splash/Jhin_5.jpg");
  background-size: cover;
}
div.td {
  border-color: var(--accent-dark-transparent);
  background-color: var(--accent-dark-transparent);
}
div.th {
  border-color: var(--accent-medium-transparent);
  background-color: var(--accent-light-transparent);
}

/* Origins */
  div.th.origin > div.origin-hover::before {
    border-bottom-color: var(--accent-light);
  }

  div.th.origin > div.origin-hover::after {
    border-bottom-color: var(--accent-medium);
  }

div.origin-hover {
  border-color: var(--accent-light);
  background-color: var(--accent-medium);
}

/* Classes */
div.th.class > div.class-hover::before {
  border-right-color: var(--accent-light);
}

div.th.class > div.class-hover::after {
  border-right-color: var(--accent-medium);
}

div.class-hover {
  border-color: var(--accent-light);
  background-color: var(--accent-medium);
}

/* Units */
div.unit-ability::after {
  border-right-color: var(--accent-medium);
}

div.td.left div.unit div.unit-ability::after {
  border-left-color: var(--accent-medium);
}

div.td:not(.left) div.unit div.unit-ability::after {
  border-right-color: var(--accent-medium);
}

div.td:not(.top) div.unit div.unit-ability {
  background-color: var(--accent-medium);
  border-top-color: var(--accent-light) !important;
  border-bottom-color: var(--accent-light) !important;
}

div.td.top div.unit div.unit-ability {
  background-color: var(--accent-medium);
  border-left-color: var(--accent-light) !important;
  border-right-color: var(--accent-light) !important;
}

div.td.left div.unit div.unit-ability::after {
  border-top: 15px solid transparent !important;
  border-bottom: 15px solid transparent !important;
  border-left: 15px solid var(--accent-medium) !important;
  border-right: 15px solid transparent !important;
}

div.td.top div.unit div.unit-ability::after {
  border-top: 15px solid var(--accent-medium) !important;
  border-bottom: 15px solid transparent !important;
  border-left: 15px solid transparent !important;
  border-right: 15px solid transparent !important;
}

div.td:not(.left):not(.top) div.unit div.unit-ability::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid var(--accent-medium);
  border-left: 18px solid transparent;
}

/* Items */
div.td.left > div.item-details::before,
div.th.left > div.item-details::before {
  border-left-color: var(--accent-border-color);
}

div.td.left > div.item-details::after,
div.th.left > div.item-details::after {
  border-left-color: var(--accent-medium);
}


div.td:not(.left) > div.item-details::before,
div.th:not(.left) > div.item-details::before {
  border-right-color: var(--accent-border-color);
}

div.td:not(.left) > div.item-details::after,
div.th:not(.left) > div.item-details::after {
  border-right-color: var(--accent-medium);
}

div.item-details {
  border-color: var(--accent-border-color);
  background-color: var(--accent-medium);
  border-top-color: var(--accent-light) !important;
  border-bottom-color: var(--accent-light) !important;
}


/* Blademaster specific override */
div.th.origin.blademaster > div.origin-hover {
  margin-left: 1.5vmin;
  transform: translateX(-25%);
}

  div.th.origin.blademaster > div.origin-hover::before, div.th.origin.blademaster > div.origin-hover::after {
    left: 25%;
  }

/* Starship specific override */
div.th.origin.starship > div.origin-hover {
  transform: translateX(-75%);
}

  div.th.origin.starship > div.origin-hover::before, div.th.origin.starship > div.origin-hover::after {
    left: 75%;
  }

/* Vanguard specific override */
div.th.origin.vanguard > div.origin-hover {
  transform: translateX(-90%);
}

  div.th.origin.vanguard > div.origin-hover::before, div.th.origin.vanguard > div.origin-hover::after {
    left: 90%;
  }