body {
  background: #183316;
  color: #FFF;
  text-align: center;
  font-family: 'Roboto Slab', serif;
}

h1 {
  font-weight: bold;
  font-family: 'Noto Serif', serif;
  font-size: 50px;
  color: #FFD800;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
  font-style: italic;
  margin-bottom: 0.5em;
}

p {
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}

em {
  color: #FFD800;
  font-style: normal;
}

strong {
  color: #FF0000;
}

.hidden {
  display: none;
}

#dice {
  min-height: 60px;
  width: 400px;
  margin: 45px auto 50px;
  border-radius: 40px;
  border: 3px solid #FFF;
  padding: 30px 30px 15px 45px;
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}

.die {
  border: 1px solid #F2EFDA;
  text-shadow: 2px -1px 0px rgba(255, 255, 255, 0.3);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  text-align: center;
  width: 40px;
  height: 40px;
  float: left;
  margin: 0 15px 15px 0;
  border-radius: 20%;
  background: #FFFCE5;
  color: #3D3507;
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Noto Serif', serif;
}

.die:after {
  display: block;
  box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
  width: 100%;
  height: 100%;
  border-radius: 20%;
  content: '';
  position: relative;
  top: -41px;
  left: -1px;
  border: 1px solid #F2EFDA;
}

.die:last-child {
  -webkit-animation: dieIntro 1s 1;
          animation: dieIntro 1s 1;
}

.rumble {
  -webkit-animation: shake 0.2s;
          animation: shake 0.2s;
  display: inline-block;
}

.selfClearing:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

button {
  cursor: pointer;
  width: 90px;
  height: 40px;
  border-radius: 8px;
  background-color: #000;
  border: 2px solid #FFD800;
  color: #FFD800;
  font-weight: bold;
  font-family: 'Noto Serif', serif;
  font-size: 16px;
  font-style: italic;
  box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.5);
  transition: all 0.2s linear;
}

button:active {
  box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.5);
  -webkit-transform: translate(2px, 2px);
          transform: translate(2px, 2px);
}

button:focus {
  outline: 0;
}

button:disabled {
  opacity: 0.2;
  cursor: default;
}

#rollAnother {
  margin-right: 10px;
}

#stick {
  margin-right: 10px;
}

#creditsArea {
  display: inline-block;
  text-align: center;
  width: 145px;
}

#playAgain {
  width: 120px;
}

@-webkit-keyframes dieIntro {
  from { -webkit-transform: rotate(0deg)   scale(0.1); transform: rotate(0deg)   scale(0.1); }
  to   { -webkit-transform: rotate(360deg) scale(1.0); transform: rotate(360deg) scale(1.0); }
}

@keyframes dieIntro {
  from { -webkit-transform: rotate(0deg)   scale(0.1); transform: rotate(0deg)   scale(0.1); }
  to   { -webkit-transform: rotate(360deg) scale(1.0); transform: rotate(360deg) scale(1.0); }
}

@-webkit-keyframes rumble {
	0%   { -webkit-transform: translate(2px, 1px)   rotate(0deg); transform: translate(2px, 1px)   rotate(0deg);  }
	10%  { -webkit-transform: translate(-1px, -2px) rotate(-1deg); transform: translate(-1px, -2px) rotate(-1deg); }
	20%  { -webkit-transform: translate(-3px, 0px)  rotate(1deg); transform: translate(-3px, 0px)  rotate(1deg);  }
	30%  { -webkit-transform: translate(0px, 2px)   rotate(0deg); transform: translate(0px, 2px)   rotate(0deg);  }
	40%  { -webkit-transform: translate(1px, -1px)  rotate(1deg); transform: translate(1px, -1px)  rotate(1deg);  }
	50%  { -webkit-transform: translate(-1px, 2px)  rotate(-1deg); transform: translate(-1px, 2px)  rotate(-1deg); }
	60%  { -webkit-transform: translate(-3px, 1px)  rotate(0deg); transform: translate(-3px, 1px)  rotate(0deg);  }
	70%  { -webkit-transform: translate(2px, 1px)   rotate(-1deg); transform: translate(2px, 1px)   rotate(-1deg); }
	80%  { -webkit-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg);  }
	90%  { -webkit-transform: translate(2px, 2px)   rotate(0deg); transform: translate(2px, 2px)   rotate(0deg);  }
	100% { -webkit-transform: translate(1px, -2px)  rotate(-1deg); transform: translate(1px, -2px)  rotate(-1deg); }
}

@keyframes rumble {
	0%   { -webkit-transform: translate(2px, 1px)   rotate(0deg); transform: translate(2px, 1px)   rotate(0deg);  }
	10%  { -webkit-transform: translate(-1px, -2px) rotate(-1deg); transform: translate(-1px, -2px) rotate(-1deg); }
	20%  { -webkit-transform: translate(-3px, 0px)  rotate(1deg); transform: translate(-3px, 0px)  rotate(1deg);  }
	30%  { -webkit-transform: translate(0px, 2px)   rotate(0deg); transform: translate(0px, 2px)   rotate(0deg);  }
	40%  { -webkit-transform: translate(1px, -1px)  rotate(1deg); transform: translate(1px, -1px)  rotate(1deg);  }
	50%  { -webkit-transform: translate(-1px, 2px)  rotate(-1deg); transform: translate(-1px, 2px)  rotate(-1deg); }
	60%  { -webkit-transform: translate(-3px, 1px)  rotate(0deg); transform: translate(-3px, 1px)  rotate(0deg);  }
	70%  { -webkit-transform: translate(2px, 1px)   rotate(-1deg); transform: translate(2px, 1px)   rotate(-1deg); }
	80%  { -webkit-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg);  }
	90%  { -webkit-transform: translate(2px, 2px)   rotate(0deg); transform: translate(2px, 2px)   rotate(0deg);  }
	100% { -webkit-transform: translate(1px, -2px)  rotate(-1deg); transform: translate(1px, -2px)  rotate(-1deg); }
}

@-webkit-keyframes shake {
	0%   { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px);   }
	20%  { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
	40%  { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px);  }
	60%  { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
	80%  { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px); }
	100% { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
}

@keyframes shake {
	0%   { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px);   }
	20%  { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
	40%  { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px);  }
	60%  { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
	80%  { -webkit-transform: translate(6px, 0px); transform: translate(6px, 0px); }
	100% { -webkit-transform: translate(-6px, 0px); transform: translate(-6px, 0px);  }
}

body {
	background-image: url('data:image/png;base64,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');
}