html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: #19353a;
  font-family: sans-serif;
  overflow: hidden;
}

#tools {
  position: absolute;
  top: 0;
  z-index: 999;
  font-style: italic;
  font-size: 20px;
  color: gray;
}
#tools button {
  padding: 0;
  font-size: 0.8em;
  min-width: 1.4em;
}

/*Dice positioning*/
#dice-container {
  display: flex;
  margin: 0 auto;
  flex-flow: column nowrap;
  height: 10%;
  justify-content: center;
}
#dice-container .dice-row {
  display: flex;
  justify-content: center;
}

.die-container {
  position: relative;
  width: 20%;
  max-width: 100vmin;
}
.die-container .die-spacer {
  /*padding-bottom: 100%;*/
}
.die-container .die {
  position: absolute;
  width: 20%;
  top: 5%;
  left: 5%;
}
.die-container .die svg {
  stroke: orange;
  fill: orange;
}

/*Animating dice rolls*/
.spin {
  transition: transform 1s ease;
  transform-origin: 40% 40%;
}
.spin.go {
  transform: rotateZ(720deg);
}

/*Die faces*/
.die-pip {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.75s, opacity 0.5s linear 0.25s;
}

.one .one,
.two .two,
.three .three,
.four .four,
.five .five,
.six .six {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.25s;
}