body {
    margin: 0;
    padding: 0;
}
.page {
  margin: 0;
  margin-top: -24px;
  padding: 0;
  height: 100vh;
  text-align: center;
  font-family: sans-serif;
  color: rgba(0,44,0,0.7);
  transition: all 800ms;
}
.page.light {
  background-color: #006600;
  background-image:
    radial-gradient(
      circle at top center,
      #fff,
      #aaa
    );
}

.page.dark {
  background-color: #000;
  background-image:
    radial-gradient(
      circle at top center,
      #000,
      #444
    );
}

.glow {
    width: 300px;
    height: 300px;
    background: #ffffffaa;
    border-radius: 50%;
    filter: blur(50px);
    position: absolute;
    top: -50px;
    left: -50px;
}

.bigger > .glow {
    display: none;
}

.title {
  margin-top: 20px;
  padding-top: 40px;
  font-size: 32px;
  font-family: sans-serif;
  text-align: center;
}
.score {
  margin-top: -50px;
  color: rgba(0,88,0,0.8);
  font-size: 60px;
  font-family: monospace;
  text-align: center;
}

.dark .title,
.dark .score {
    color: #ACE !important;
}

.wrap {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  perspective:600px;
  cursor: grab;
  transition: all 300ms;
    transform: scale(0.7);
  margin-top: 0px;
}

.grabbing {
  cursor: grabbing;
}


.cube {
  position:relative;
  transform-style: preserve-3d;
  transition: transform .5s;
  width: 100%;
  height: 100%;
}

.cube > div {
  border-radius: 20px;
  width: 198px;
  height: 198px;
  position: absolute;
  background-image: url(http://davealger.com/assets/img/dice.png);
  background-repeat: no-repeat;
  opacity: 0.8;
  filter: blur(2px);
}

.front  { opacity: 1; transform: rotateY(   0deg ) translateZ( 100px ); background-position: 0px 0px; }
.back   { transform: rotateX( 180deg ) translateZ( 100px ); background-position: -400px -200px; }
.right  { transform: rotateY(  90deg ) translateZ( 100px ); background-position: -200px 0px; }
.left   { transform: rotateY( -90deg ) translateZ( 100px ); background-position: -200px -200px; }
.top    { transform: rotateX(  90deg ) translateZ( 100px ); background-position: -400px 0px; }
.bottom { transform: rotateX( -90deg ) translateZ( 100px ); background-position: 0px -200px; }

.cube.show1 { opacity: 1; transform: translateZ( -100px ) rotateY(    0deg ); }
.cube.show1 > .back { filter: blur(8px); }
.cube.show1 > .front { filter: unset; }

.cube.show2 { transform: translateZ( -100px ) rotateX( -180deg ); }
.cube.show2 > .front { filter: blur(8px); }
.cube.show2 > .back { filter: unset; }

.cube.show3 { transform: translateZ( -100px ) rotateY(  -90deg ); }
.cube.show3 > .left { filter: blur(8px); }
.cube.show3 > .right { filter: unset; }

.cube.show4 { transform: translateZ( -100px ) rotateY(   90deg ); }
.cube.show4 > .right { filter: blur(8px); }
.cube.show4 > .left { filter: unset; }

.cube.show5 { transform: translateZ( -100px ) rotateX(  -90deg ); }
.cube.show5 > .bottom { filter: blur(8px); }
.cube.show5 > .top { filter: unset; }

.cube.show6 { transform: translateZ( -100px ) rotateX(   90deg ); }
.cube.show6 > .top { filter: blur(8px); }
.cube.show6 > .bottom { filter: unset; }

.bigger {
  transform: scale(1.1);
}

.smaller {
  transform: scale(0.7);
  margin-top: 0px;
}

.twist1 {
  transform: scale(0.7) rotate(10deg);
}
.twist2 {
  transform: scale(0.7) rotate(30deg);
}
.twist3 {
  transform: scale(0.7) rotate(60deg);
}
.twist4 {
  transform: scale(0.7) rotate(80deg);
}
.twist5 {
  transform: scale(0.7) rotate(90deg);
}
.twist6 {
  transform: scale(0.7) rotate(100deg);
}

.total-rolls {
    font-size: 18px;
}
.total-wins {
    font-size: 42px;
}