:root {
  --background-color: rgb(36, 27, 1);
  --accent-background-color: rgb(41, 31, 1);
  --accent-dark: rgb(56, 42, 1);
  --accent-dark-transparent: rgba(56, 42, 1, 0.5);
  --accent-medium: rgb(64, 48, 1);
  --accent-medium-transparent: rgba(64, 48, 1, 0.7);
  --accent-light: rgb(77, 58, 2);
  --accent-light-transparent: rgba(77, 58, 2, 0.7);
  --text-color: rgb(250, 188, 5);
  --accent-border-color: white;
  --unit-description-clear: rgba(64, 48, 1, 0);
  --unit-description-background: rgba(64, 48, 1, 0.9);
}

/* HEADER       */
div#header {
  background-color: rgb(51, 38, 1);
}

div.header-nav-button:hover {
  background-color: rgb(66, 50, 1);
  border: 1px solid rgb(59, 44, 1);
}

div.header-logo {
  background-color: rgb(250, 188, 5);
  border: 1px solid rgb(230, 173, 5);
}

/* Units Table */
div#units-table {
  width: calc( 98vmin + 30px );
  height: calc( 98vmin + 30px - 70px );
}
  div#units-table > div.tr > div.td,
  div#units-table > div.tr > div.th {
    width: calc( 7vmin - 5px );
    height: calc( 7vmin - 5px );
  }

div.class-picture > img,
div.origin-picture > img {
  width: 3.5vmin;
  height: 3.5vmin;
  filter: sepia(100%) saturate(200%) hue-rotate(330deg);
}

/* Rise Of The Elements Colors And Accents*/
body {
  color: var(--text-color);
  background: linear-gradient(to right, rgba(36, 27, 1, 0.8) 0%, rgba(36, 27, 1, 0.8) 100%), url("../../pictures/champions/splash/Lux_7.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;
}

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

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

/* Crystal specific override */
div.th.origin.crystal > div.origin-hover {
  transform: translateX(-25%);
}

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

/* Shadow specific override */
div.th.origin.shadow > div.origin-hover {
  transform: translateX(-50%);
}

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

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

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

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

/****************/
/* ITEMS        */
div#items {
  left: 120vmin;
}
/****************/
/* EXPERIENCE   */
div#experience {
  left: 120vmin;
}

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