#craps_body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0 0;
  padding: 0 0;
  background-image: url('../images/seamless-wood-texture-free-17.jpg')
}
#craps_footer {
  text-align: center;
  margin: 20px 0 0 0;
  width: 100%;
  padding: 20px 0 10px 0;
  border: 8px solid black;
  border-radius: 20px;
  background: #FFD700;
}
.craps_section {
  width: 800px;
  display: block;
  margin: 0px auto;
  padding: 0 0;
}
.craps_section .header {
  text-align: center;
  margin: 0 0;
  width: 100%;
  padding: 20px 0 10px 0;
  border: 8px solid black;
  border-radius: 20px;
  background: #FFD700;
}
.craps_section h1 {
  font-size: 2em;
  font-weight: bold;
}
.craps_section h2 {
  font-size: 1.2em;
  font-variant: small-caps;
}

.craps_div {
  width: 100%;
}
.craps_table {
  display: inline-block;
  width: 100%;
  height: 600px;
  margin: 10px 0;
  border: 8px solid black;
  border-radius: 20px;
  background: #A2CD5A;
  perspective: 500px;
  -webkit-perspective: 500px; 
  -moz-perspective: 500px; 
  -ms-perspective: 500px; 
  -o-perspective: 500px; 
}
.controls {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0;
}
.controls button {
  display: inline-block;
  border: 8px solid black;
  border-radius: 20px;
  width: 100%;
  margin: 0 0;
}
.cube {
  display: inline-block;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.dice_left {
  left: 20%;
  top: 20%;
}
.dice_right {
  left: 60%;
  top: 25%;
}
.dot1 {
  background-image: url('../images/dice1.png')
}
.dot2 {
  background-image: url('../images/dice2.png')
}
.dot3 {
  background-image: url('../images/dice3.png')
}
.dot4 {
  background-image: url('../images/dice4.png')
}
.dot5 {
  background-image: url('../images/dice5.png')
}
.dot6 {
  background-image: url('../images/dice6.png')
}
.dice {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 96px;
  height: 96px;
  background-size: cover;
}
.dice_small {
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
  width: 48px;
  height: 48px;
  margin: 2px;
  background-size: cover;
}
.dice_point {
  display: inline-block;
  position: absolute;
  width: 40%;
  top: 4%;
  right: 5%;
  padding-left: 5%;
}
.dice_rolls {
  /*display: flex;*/
  display: block;
  position: absolute;
  /*bottom: 128px;*/
  top: 300px;
  width: 80%;
  margin: 0 10%;
  justify-content: center;
  align-items: center;
}
.dice_pair_wide {
  display: inline-block;
  padding-left: 30%;
  width: 90%;
}
.dice_pair_wide span {
  font-size: 1.8em;
  position: absolute;
  top: 20%;
  left: 5%;
}
.dice_pair {
  display: inline-block;
  width: 48px;
  margin: 8px;
  float: left;
}

  /* front */
  .cube .face1 {
    -webkit-transform: translateZ(48px);
    -moz-transform: translateZ(48px);
    -ms-transform: translateZ(48px);
    -o-transform: translateZ(48px);
    transform: translateZ(48px);
  }
  /* right */
  .cube .face2 {
    -webkit-transform: rotateY(90deg) translateZ(48px);
    -moz-transform: rotateY(90deg) translateZ(48px);
    -ms-transform: rotateY(90deg) translateZ(48px);
    -o-transform: rotateY(90deg) translateZ(48px);
    transform: rotateY(90deg) translateZ(48px);
  }
  /* top */
  .cube .face3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(48px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(48px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(48px);
    -o-transform: rotateY(90deg) rotateX(90deg) translateZ(48px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(48px);
  }
  /* back */
  .cube .face4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(48px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(48px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(48px);
    -o-transform: rotateY(180deg) rotateZ(90deg) translateZ(48px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(48px);
  }
  /* left */
  .cube .face5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(48px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(48px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(48px);
    -o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(48px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(48px);
  }
  /* bottom */
  .cube .face6 {
    -webkit-transform: rotateX(-90deg) translateZ(48px);
    -moz-transform: rotateX(-90deg) translateZ(48px);
    -ms-transform: rotateX(-90deg) translateZ(48px);
    -o-transform: rotateX(-90deg) translateZ(48px);
    transform: rotateX(-90deg) translateZ(48px);
  }