:root {
  --background: #1e182c;
  --champ-text: #5b5566;
  --highlight: #3bfc00;
  --pick-size: 6vh;
}

h1 {
  color: #c8aa6e;
  text-align: center;
}
button {
  padding: 8px 16px;
  background-color: var(--background);
  border: 2px solid var(--champ-text);
  border-radius: 5px;
  color: var(--champ-text);
  cursor: pointer;
  transition: all 0.3s;
}
button:hover {
  background-color: var(--background);
  border-color: var(--highlight);
}
body {
  font-family: Arial, sans-serif;
  background-color: var(--background);
  color: #ffffff;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 4em;
  background-color: var(--background);
  min-height: 100vh;
  z-index: 2;
}
.main-container {
  display: grid;
  height: 100%;
}
/*.main-container > div {
  width: 100vw;
}*/
.teams-container,
.settings-container,
#loading,
.champion-list-container {
  grid-area: 1 / 1;
}
.champion-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  top: 10vh;
}
.champion-list {
  overflow-y: auto;
  padding-top: 7em;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 800px;
}

.settings-container {
  z-index: 1;
  pointer-events: none;
}
.settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em;
  background-color: var(--background);
  pointer-events: all;
}

.teams-container {
  display: flex;
  align-items: flex-end;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.team-container {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: stretch;
  min-width: 0px;
  flex: 1 0 auto;
}

#between-teams-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  order: 2;
  background-color: var(--background);
  flex: 0 1 auto;
  min-width: 0;
}

.delta-help {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--champ-text);
  font-weight: bold;
}
.delta-help > .white {
  color: white;
  font-weight: normal;
}
@media only screen and (max-width: 1526px) {
  .delta-help {
    display: none;
  }
  .delta-help-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    padding: 10px;
    height: 6.5em;
  }
  .delta-help-small > p {
    margin: auto;
  }
}
@media only screen and (min-width: 1526px) {
  .delta-help-small {
    display: none;
  }
}
.pool-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  pointer-events: none;
  min-height: 0;
  height: 72vh;
  overflow: auto;
  /*justify-content: flex-end; remove scrollbar */
}

.pool-copy-style {
  pointer-events: all;
  cursor: pointer;
  color: var(--champ-text);
  font-weight: bold;
}
.pool {
  direction: ltr;
  background-color: var(--background);
  transition: all 0.3s ease;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--champ-text);
  padding: 10px;
  cursor: pointer;
}
.pool:hover {
  border-color: var(--highlight);
}
.pool > .pool-placeholder {
  color: var(--champ-text);
  font-weight: bold;
}

.red-team > .pool-comb-container {
  direction: rtl;
  align-items: end;
}
.red-team > div > .pool-container > .pool {
  direction: rtl;
  align-items: end;
}
.pool-comb-container {
  display: flex;
  align-items: end;
  min-height: 0;
  overflow: hidden;
  height: 82vh;
}
.pool-combinations {
  display: flex;
  flex-direction: column;
  color: var(--champ-text);
  font-weight: bold;
  overflow: auto;
  flex-shrink: 0;
  pointer-events: all;
  height: 82vh;
  justify-content: center;
}
.pool-combination {
  display: flex;
  align-items: center;
  border: 2px solid var(--champ-text);
  height: var(--champion-height);
}

.pool-combination > div {
  height: var(--champion-height);
  width: var(--champion-height);
  overflow: hidden;
}
.pool-combination > div .champ_splash {
  width: 11em;
  object-fit: cover;
  margin-left: -220%;
  margin-top: -40%;
}
.champ-container {
  display: flex;
  background-color: var(--background);
  min-width: 0;
  /* Match pick-header padding */
}
.ban-container {
  background-color: transparent;
}
.blue-team {
  order: 1;
}
.red-team {
  order: 3;
}
.blue-team > .champ-container {
  align-items: flex-start;
}
.red-team > .champ-container {
  align-items: flex-end;
  flex-direction: row-reverse;
}

.champ-slot {
  /*background-color: var(--background);*/
  background-position: 50% 10%;
  position: relative;
  border: 2px solid var(--champ-text);
  text-align: center;
  font-size: 1em;
  color: var(--champ-text);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  background-color: #00000034;
  background-blend-mode: darken;
}
.blue-team > .champ-slot {
  transform: scaleX(-1);
}
.placeholder {
  pointer-events: none;
}
.pick-slot {
  height: var(--pick-size);
  min-height: 120px;
  background-size: 300%;
  flex: 1;
}
.ban-slot {
  /*background-color: var(--background);*/
  width: 3em;
  height: 3em;
  background-size: 300%;
  padding: 10px;
}
.champ-slot:hover {
  border-color: var(--highlight);
  box-shadow: 0 0 15px rgba(200, 170, 110, 0.2);
}

.champ-slot.filled {
  background: rgba(200, 170, 110, 0.1);
  border-color: var(--highlight);
}

.champ-slot.editing {
  box-shadow: 0 0 20px var(--highlight);
}
.x-ban {
  position: absolute;
  top: 0px;
  padding-top: 5%;
  color: white;
  pointer-events: all;
}
.ban-blue > .x-ban {
  right: 0px;
  padding-right: 5%;
}
.ban-red > .x-ban {
  left: 0px;
  padding-left: 5%;
}
.champ-overlay {
  position: absolute;
  height: var(--pick-size);
  bottom: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.champ-overlay > p {
  color: white;
}
.blue-champ-overlay > p {
  text-align: right;
}
.red-champ-overlay > p {
  text-align: left;
}
.blue-champ-overlay {
  right: 0px;
  padding-right: 5%;
}
.blue-champ-overlay > .x {
  text-align: right;
}
.red-champ-overlay {
  left: 0px;
  padding-left: 5%;
}
.red-champ-overlay > .x {
  text-align: left;
}

.champ-overlay > img {
  width: 1.5em;
}
.champ-overlay > * {
  pointer-events: all;
  margin-top: auto;
  margin-bottom: auto;
}

.lane-selector-container > img {
  width: 1.5em;
}
.lane-selector-container > img:hover {
  filter: brightness(200%);
}

:root {
  --champion-height: 2em;
}
.champion-wide {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 2fr 1fr 1.2fr 0.8fr 0.8fr 1fr;
  background-color: var(--background);
  border: 2px solid var(--champ-text);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  align-self: center;
  height: var(--champion-height);
}
.champion-wide > p {
  margin-top: 0.4em;
  text-align: center;
}

.champion-wide > .champ_splash {
  width: 4em;
  height: 200%;
  object-fit: cover;
  margin-top: -20%;
}
.champion-wide > .champ_lane {
  height: 100%;
  width: 100%;
  object-fit: contain;
  height: var(--champion-height);
}

.champion-wide:hover:not(.picked) {
  background-color: #3f4650;
  border-color: var(--highlight);
}
.big-button {
  display: block;
  padding: 10px 20px;
  background-color: var(--champ-text);
  color: #0a1428;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}
.big-button:hover {
  background-color: var(--highlight);
}

.search-container {
  max-width: 600px;
}

.search-bar {
  width: 11em;
  padding: 10px;
  font-size: 1em;
  background-color: var(--background);
  border: 2px solid var(--champ-text);
  border-radius: 5px;
  color: #ffffff;
  outline: none;
  box-sizing: border-box;
}

.search-bar:focus {
  border-color: var(--highlight);
}

.filter-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.filter-container > img {
  cursor: pointer;
}

.selected-slot {
  border-color: var(--highlight);
}
.unavaible {
  display: none;
}
.buttons {
  display: flex;
  max-width: 800px;
  margin: 5px;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
}