body {
  background-color: #272f2c;
}

#roster-image {
  width: 100%;
  grid-column: 1 / span 13;
  grid-row: 1 / span 7;
}

.roster-container {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.roster-container div {
  pointer-events: none;
}

.roster-container div.hidden {
  display: none;
}

.roster-container.allow .selection-box {
  background-color: #008000aa;
  
}

.roster-container.deny .selection-box {
  background-color: #800000aa;
}

.roster-container .random-box {
  background-color: #800080aa;
  z-index: 10;  
}

.roster-container .random-box.final {
  border: 6px solid lawngreen;
}

.control-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 4fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "roll roll . character"
    "allow deny . character"
    "reset animation . costume";
  column-gap: 10px;
  row-gap: 10px;
  padding: 15px 10%;
  justify-items: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.5vw;
}

.control-grid button {
  padding: 15px 15%;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  border-radius: 10px;
  background-color: #98c2b2;
}

.control-grid button.active {
  background-color: #02ec93;
}

.character-border {
  padding: 15px;
}

.character-border.on {
  border: 4px dashed rgb(255, 208, 54);
  border-radius: 15px;
}

.character-container {
  font-size: 3vw;
  color: rgb(207, 140, 255);
  height: 3.5vw;
  overflow: hidden;
  margin-top: .25vw;
}

.character-list {
  list-style: none;
  margin: 0px;
  padding: 0px;  
  text-align: center;
}

.character-list.change {
  animation-name: change;  
  animation-duration: 300ms;
}

.character-list li {
  line-height: 1;
}

.character-list li + li {
  margin-top: 10px;
}

.control-grid .costume {
  color: rgb(236, 209, 255);
}

@keyframes change {
  0% {
    transform: translate(0, -50%);
  }
  100% {
    transform: translate(0, 0%);
  }
}