#coin{margin-top:20px;width:100%;height:0;padding-bottom:100%;position:relative}#coin div{width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 45px hsla(0,0%,100%,.3),0 12px 20px -10px rgba(0,0,0,.4)}.side-a{background-color:#b00}.side-a,.side-b{color:#fff;text-align:center}.side-b{background-color:#3e3e3e}#coin{transition:-webkit-transform 1s ease-in;-webkit-transform-style:preserve-3d}#coin div{position:absolute;-webkit-backface-visibility:hidden}.side-a{background-image:url(https://www.leftovercurrency.com/app/uploads/2017/04/1-hong-kong-dollar-coin-queen-elizabeth-ii-obverse-1.jpg);z-index:100}.side-a,.side-b{background-size:contain}.side-b{background-image:url(https://www.leftovercurrency.com/app/uploads/2017/04/1-hong-kong-dollar-coin-queen-elizabeth-ii-reverse-1.jpg);-webkit-transform:rotateY(-180deg)}#coin.heads{-webkit-animation:flipHeads 2s ease-out forwards;animation:flipHeads 2s ease-out forwards}#coin.tails{-webkit-animation:flipTails 2s ease-out forwards;animation:flipTails 2s ease-out forwards}@-webkit-keyframes flipHeads{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}to{-webkit-transform:rotateY(540deg);transform:rotateY(540deg)}}@keyframes flipHeads{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}to{-webkit-transform:rotateY(540deg);transform:rotateY(540deg)}}@-webkit-keyframes flipTails{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}to{-webkit-transform:rotateY(2turn);transform:rotateY(2turn)}}@keyframes flipTails{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}to{-webkit-transform:rotateY(2turn);transform:rotateY(2turn)}}.dice{all:revert;align-items:center;display:grid;grid-gap:2rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));grid-template-rows:auto;justify-items:center;padding:2rem;-webkit-perspective:600px;perspective:600px}.die-list{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:6rem;list-style-type:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:6rem}.even-roll{transition:-webkit-transform 1.5s ease-out;transition:transform 1.5s ease-out;transition:transform 1.5s ease-out,-webkit-transform 1.5s ease-out}.odd-roll{transition:-webkit-transform 1.25s ease-out;transition:transform 1.25s ease-out;transition:transform 1.25s ease-out,-webkit-transform 1.25s ease-out}.die-item{background-color:#6b1515;box-shadow:inset -.35rem .35rem .75rem rgba(0,0,0,.3),inset .5rem -.25rem .5rem rgba(0,0,0,.15);display:grid;grid-column:1;grid-row:1;grid-template-areas:"one two three" "four five six" "seven eight nine";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:100%;padding:1rem;width:100%}.dot{align-self:center;background-color:#676767;border-radius:50%;box-shadow:inset -.15rem .15rem .25rem rgba(0,0,0,.5);display:block;height:1.25rem;justify-self:center;width:1.25rem}.roll[data-roll="1"]{-webkit-transform:rotateX(1turn) rotateY(2turn) rotate(1turn);transform:rotateX(1turn) rotateY(2turn) rotate(1turn)}.roll[data-roll="2"]{-webkit-transform:rotateX(450deg) rotateY(2turn) rotate(1turn);transform:rotateX(450deg) rotateY(2turn) rotate(1turn)}.roll[data-roll="3"]{-webkit-transform:rotateX(1turn) rotateY(630deg) rotate(1turn);transform:rotateX(1turn) rotateY(630deg) rotate(1turn)}.roll[data-roll="4"]{-webkit-transform:rotateX(1turn) rotateY(810deg) rotate(1turn);transform:rotateX(1turn) rotateY(810deg) rotate(1turn)}.roll[data-roll="5"]{-webkit-transform:rotateX(270deg) rotateY(2turn) rotate(1turn);transform:rotateX(270deg) rotateY(2turn) rotate(1turn)}.roll[data-roll="6"]{-webkit-transform:rotateX(1turn) rotateY(900deg) rotate(1turn);transform:rotateX(1turn) rotateY(900deg) rotate(1turn)}.even-roll[data-roll="1"]{-webkit-transform:rotateX(1turn) rotateY(2turn) rotate(1turn);transform:rotateX(1turn) rotateY(2turn) rotate(1turn)}.even-roll[data-roll="2"]{-webkit-transform:rotateX(450deg) rotateY(2turn) rotate(1turn);transform:rotateX(450deg) rotateY(2turn) rotate(1turn)}.even-roll[data-roll="3"]{-webkit-transform:rotateX(1turn) rotateY(630deg) rotate(1turn);transform:rotateX(1turn) rotateY(630deg) rotate(1turn)}.even-roll[data-roll="4"]{-webkit-transform:rotateX(1turn) rotateY(810deg) rotate(1turn);transform:rotateX(1turn) rotateY(810deg) rotate(1turn)}.even-roll[data-roll="5"]{-webkit-transform:rotateX(270deg) rotateY(2turn) rotate(1turn);transform:rotateX(270deg) rotateY(2turn) rotate(1turn)}.even-roll[data-roll="6"]{-webkit-transform:rotateX(1turn) rotateY(900deg) rotate(1turn);transform:rotateX(1turn) rotateY(900deg) rotate(1turn)}.odd-roll[data-roll="1"]{-webkit-transform:rotateX(-1turn) rotateY(-2turn) rotate(-1turn);transform:rotateX(-1turn) rotateY(-2turn) rotate(-1turn)}.odd-roll[data-roll="2"]{-webkit-transform:rotateX(-270deg) rotateY(-2turn) rotate(-1turn);transform:rotateX(-270deg) rotateY(-2turn) rotate(-1turn)}.odd-roll[data-roll="3"]{-webkit-transform:rotateX(-1turn) rotateY(-810deg) rotate(-1turn);transform:rotateX(-1turn) rotateY(-810deg) rotate(-1turn)}.odd-roll[data-roll="4"]{-webkit-transform:rotateX(-1turn) rotateY(-630deg) rotate(-1turn);transform:rotateX(-1turn) rotateY(-630deg) rotate(-1turn)}.odd-roll[data-roll="5"]{-webkit-transform:rotateX(-450deg) rotateY(-2turn) rotate(-1turn);transform:rotateX(-450deg) rotateY(-2turn) rotate(-1turn)}.odd-roll[data-roll="6"]{-webkit-transform:rotateX(-1turn) rotateY(-900deg) rotate(-1turn);transform:rotateX(-1turn) rotateY(-900deg) rotate(-1turn)}[data-side="1"]{-webkit-transform:rotate3d(0,0,0,90deg) translateZ(4rem);transform:rotate3d(0,0,0,90deg) translateZ(4rem)}[data-side="2"]{-webkit-transform:rotate3d(-1,0,0,90deg) translateZ(4rem);transform:rotate3d(-1,0,0,90deg) translateZ(4rem)}[data-side="3"]{-webkit-transform:rotateY(90deg) translateZ(4rem);transform:rotateY(90deg) translateZ(4rem)}[data-side="4"]{-webkit-transform:rotate3d(0,-1,0,90deg) translateZ(4rem);transform:rotate3d(0,-1,0,90deg) translateZ(4rem)}[data-side="5"]{-webkit-transform:rotateX(90deg) translateZ(4rem);transform:rotateX(90deg) translateZ(4rem)}[data-side="6"]{-webkit-transform:rotateX(180deg) translateZ(4rem);transform:rotateX(180deg) translateZ(4rem)}[data-side="1"] .dot:first-of-type{grid-area:five}[data-side="2"] .dot:first-of-type{grid-area:one}[data-side="2"] .dot:nth-of-type(2){grid-area:nine}[data-side="3"] .dot:first-of-type{grid-area:one}[data-side="3"] .dot:nth-of-type(2){grid-area:five}[data-side="3"] .dot:nth-of-type(3){grid-area:nine}[data-side="4"] .dot:first-of-type{grid-area:one}[data-side="4"] .dot:nth-of-type(2){grid-area:three}[data-side="4"] .dot:nth-of-type(3){grid-area:seven}[data-side="4"] .dot:nth-of-type(4){grid-area:nine}[data-side="5"] .dot:first-of-type{grid-area:one}[data-side="5"] .dot:nth-of-type(2){grid-area:three}[data-side="5"] .dot:nth-of-type(3){grid-area:five}[data-side="5"] .dot:nth-of-type(4){grid-area:seven}[data-side="5"] .dot:nth-of-type(5){grid-area:nine}[data-side="6"] .dot:first-of-type{grid-area:one}[data-side="6"] .dot:nth-of-type(2){grid-area:three}[data-side="6"] .dot:nth-of-type(3){grid-area:four}[data-side="6"] .dot:nth-of-type(4){grid-area:six}[data-side="6"] .dot:nth-of-type(5){grid-area:seven}[data-side="6"] .dot:nth-of-type(6){grid-area:nine}@media (min-width:900px){.dice{-webkit-perspective:900px;perspective:900px}}
/*# sourceMappingURL=main.736a2e00.chunk.css.map */