:root {
  --background-color: rgb(79, 59, 0);
  --accent-background-color: rgba(51, 38, 0, 0.8);
  --accent-dark: rgb(102, 86, 80);
  --accent-dark-transparent: rgba(102, 86, 80, 0.3);
  --accent-medium: rgb(128, 107, 100);
  --accent-medium-transparent: rgba(128, 107, 100, 0.5);
  --accent-light: rgb(153, 129, 120);
  --accent-light-transparent: rgba(153, 129, 120, 0.5);
  --text-color: rgb(160, 160, 160);
  --accent-border-color: rgb(128, 107, 100);
  --unit-description-clear: rgba(12, 12, 12, 0);
  --unit-description-background: rgba(12, 12, 12, 0.9);
  --text-color: rgb(240, 240, 240);
  --tier-1: rgb(161, 156, 139);
  --tier-2: rgb(28, 182, 86);
  --tier-3: rgb(40, 192, 245);
  --tier-4: rgb(199, 112, 255);
  --tier-5: rgb(250, 188, 5);
  --ability-power: rgb(122, 109, 255);
  --header-logo: rgb(230, 193, 180);
}
/* HEADER       */
div#header {
  background-color: var(--accent-light);
}
div.header-nav-button:hover {
  background-color: rgb(81, 230, 220);
  border: 1px solid rgb(81, 230, 220);
  color: black;
}
div.header-logo {
  background-color: var(--header-logo);
  border: 1px solid var(--header-logo);
}
  div.header-logo > a > div.header-logo-img > img {
    filter: invert(100%);
  }
  div.header-logo > a > div.header-logo-text {
    color: black;
  }
div.class-picture > img,
div.origin-picture > img {
  filter: invert(1);
}
/* Galaxies Colors And Accents*/
body {
  color: var(--text-color);
  background: linear-gradient(to right, var(--accent-background-color) 0%, var(--accent-background-color) 100%), url("pictures/background.jpg") 0% 0% / cover no-repeat;
  background-size: cover;
}
div.td {
  border-color: var(--accent-dark-transparent);
  background-color: var(--accent-dark-transparent);
}
div.th:not(.invisible) {
  border-color: var(--accent-light-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: 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: var(--accent-medium);
}
/* Units */
div.unit-ability::after {
  border-right-color: var(--accent-border-color);
}
div.td.left div.unit div.unit-ability::after {
  border-left-color: var(--accent-border-color);
}
div.td:not(.left) div.unit div.unit-ability::after {
  border-right-color: var(--accent-border-color);
}
div.td:not(.top) div.unit div.unit-ability {
  background: var(--accent-medium);
  border-top-color: var(--accent-border-color) !important;
  border-bottom-color: var(--accent-border-color) !important;
}
div.td.top div.unit div.unit-ability {
  background: var(--accent-medium);
  border-left-color: var(--accent-border-color) !important;
  border-right-color: var(--accent-border-color) !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-border-color) !important;
  border-right: 15px solid transparent !important;
}
div.td.top div.unit div.unit-ability::after {
  border-top: 15px solid var(--accent-border-color) !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-border-color);
  border-left: 18px solid transparent;
}
.unit-tier-1 > img,
.unit-tier-1::before {
  background-color: var(--tier-1);
}
.unit-tier-2 > img,
.unit-tier-2::before {
  background-color: var(--tier-2);
}
.unit-tier-3 > img,
.unit-tier-3::before {
  background-color: var(--tier-3);
}
.unit-tier-4 > img,
.unit-tier-4::before {
  background-color: var(--tier-4);
}
.unit-tier-5 > img,
.unit-tier-5::before {
  background-color: var(--tier-5);
}
/* 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: var(--accent-medium);
  border-top-color: var(--accent-light) !important;
  border-bottom-color: var(--accent-light) !important;
}
/* Adept specific override */
div.th.origin.adept > div.origin-hover {
  margin-left: 1.5vmin;
  transform: translateX(0%);
}
  div.th.origin.adept > div.origin-hover::before, div.th.origin.adept > div.origin-hover::after {
    left: 0%;
  }
/* Assassin specific override */
div.th.origin.assassin > div.origin-hover {
  transform: translateX(-25%);
}
  div.th.origin.assassin > div.origin-hover::before, div.th.origin.assassin > div.origin-hover::after {
    left: 25%;
  }
/* Syphoner specific override */
div.th.origin.syphoner > div.origin-hover {
  transform: translateX(-75%);
}
  div.th.origin.syphoner > div.origin-hover::before, div.th.origin.syphoner > 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%;
  }
/* Warlord specific override */
div.th.class.warlord > div.class-hover {
  transform: translateY(-75%);
}
  div.th.class.warlord > div.class-hover::before, div.th.class.warlord > div.class-hover::after {
    top: 75%;
  }
/* Katarina specific override */
div.unit-td.unit.unit-katarina > div.unit-ability {
  transform: translate(-25%, -100%) !important
}
  div.unit-td.unit.unit-katarina > div.unit-ability::before, div.unit-td.unit.unit-katarina > div.unit-ability::after {
    left: 25% !important;
  }
.tier-1 {
  color: var(--tier-1);
}
.tier-2 {
  color: var(--tier-2);
}
.tier-3 {
  color: var(--tier-3);
}
.tier-4 {
  color: var(--tier-4);
}
.tier-5 {
  color: var(--tier-5);
}