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

div#units-table {
  width: calc( 127.5vmin + 30px );
  height: calc( 93.5vmin + 30px - 70px );
}
  div#units-table > div.tr > div.td,
  div#units-table > div.tr > div.th {
    width: calc( 8.5vmin - 5px );
    height: calc( 8.5vmin - 5px );
  }

div.class-picture > img,
div.origin-picture > img {
  width: 3.5vmin;
  height: 3.5vmin;
}

/* LEGEND       */
div#items-legend {
  left: calc( 132vmin + 50vmin + 14px + 18px );
}
/* EXPERIENCE   */
div#experience {
  left: 132vmin;
}
/* ITEMS        */
div#items {
  left: 132vmin;
}


/* Beta Colors And Accents*/
body {
  color: var(--text-color);
  background-color: var(--background-color);
}

div.td {
  border-color: var(--accent-background-color);
  background-color: var(--accent-background-color);
}

div.th {
  border-color: var(--accent-medium);
  background-color: var(--accent-medium);
}

  /* 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.unit-ability {
  background-color: var(--accent-medium);
}

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);
}


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

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

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

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

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

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