body *{box-sizing:border-box}html,body{background-color:#98bcc2}#board{position:fixed;top:0;left:0;right:0;margin-left:auto;margin-right:auto;max-height:100%;max-width:100%}#pieces{position:absolute;top:0;left:0;padding:5px;background-color:#14879c;border-radius:0 0 5px 0}.piece{width:50px;max-width:50px;min-width:25px;cursor:move;cursor:-webkit-grab;cursor:grab;border-radius:26px;border:3px solid blue}@-webkit-keyframes astray{from{border-color:blue}to{border-color:#006838}}@keyframes astray{from{border-color:blue}to{border-color:#006838}}.astray{-webkit-animation-name:astray;animation-name:astray;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes spin{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}@keyframes spin{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}@-webkit-keyframes roll_1{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}@keyframes roll_1{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}@-webkit-keyframes roll_2{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(270deg) rotateY(360deg) rotateZ(360deg)}}@keyframes roll_2{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(270deg) rotateY(360deg) rotateZ(360deg)}}@-webkit-keyframes roll_3{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(270deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(270deg) rotateZ(360deg)}}@keyframes roll_3{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(270deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(270deg) rotateZ(360deg)}}@-webkit-keyframes roll_4{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(360deg)}}@keyframes roll_4{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(360deg)}}@-webkit-keyframes roll_5{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(90deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(90deg) rotateY(360deg) rotateZ(360deg)}}@keyframes roll_5{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(90deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(90deg) rotateY(360deg) rotateZ(360deg)}}@-webkit-keyframes roll_6{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(360deg)}}@keyframes roll_6{0%{-webkit-transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateZ(2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}16%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);transform:translateZ(2em) rotateX(180deg) rotateY(180deg) rotateZ(0deg)}33%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg);transform:translateZ(2em) rotateX(360deg) rotateY(90deg) rotateZ(180deg)}50%{-webkit-transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(360deg) rotateY(360deg) rotateZ(360deg)}66%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(270deg)}83%{-webkit-transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg);transform:translateZ(2em) rotateX(270deg) rotateY(180deg) rotateZ(180deg)}100%{-webkit-transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(360deg);transform:translateZ(2em) rotateX(180deg) rotateY(360deg) rotateZ(360deg)}}#roller{position:absolute;top:0;zright:1em;right:0;font-size:40px;width:4em;background:#14879c;text-align:center;padding-bottom:1em}@media (max-width: 640px){#roller{font-size:30px}}@media (max-width: 480px){#roller{font-size:20px}}#roll{margin-bottom:2em;margin-left:auto;margin-right:auto;background:none;border:none;color:#98bcc2;font-weight:bold;font-size:0.6em;cursor:pointer}#roll:hover{color:#c9df1f}#die{zposition:absolute;width:2em;height:2em;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;margin-left:1em}#die.spinning{-webkit-animation:spin 50s infinite linear;animation:spin 50s infinite linear}#die.rolling{-webkit-animation-duration:1.7s;animation-duration:1.7s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.side{position:absolute;width:2em;height:2em}.side img{width:100%}#die .front{-webkit-transform:translateZ(1em);transform:translateZ(1em)}#die .back{-webkit-transform:rotateX(-180deg) translateZ(1em);transform:rotateX(-180deg) translateZ(1em)}#die .right{-webkit-transform:rotateY(90deg) translateZ(1em);transform:rotateY(90deg) translateZ(1em)}#die .left{-webkit-transform:rotateY(-90deg) translateZ(1em);transform:rotateY(-90deg) translateZ(1em)}#die .top{-webkit-transform:rotateX(90deg) translateZ(1em);transform:rotateX(90deg) translateZ(1em)}#die .bottom{-webkit-transform:rotateX(-90deg) translateZ(1em);transform:rotateX(-90deg) translateZ(1em)}