html,
body {
    height: 100%;
    overflow: hidden;
}

html {
    background: #333;
    background-image: radial-gradient(circle farthest-side, #626262 0%, #333 100%);
}

body {
    background: repeat 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='99' height='99' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0H0v10' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='.5'/%3E%3C/pattern%3E%3Cpattern id='b' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath fill='url(%23a)' d='M0 0h100v100H0z'/%3E%3Cpath d='M100 0H0v100' fill='none' stroke='rgba(255,255,255,0.2)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23b)'/%3E%3C/svg%3E");
}

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    perspective: 600px;
}

#coin {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateX(0);
}

#coin div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#coin .front {
    background: #D6AF54 url(../image/front.png) no-repeat 50%;
    background-size: 100%;
    transform: translateZ(5px);
}

#coin .back {
    background: #BBB url(../image/back.png) no-repeat 50%;
    background-size: 100%;
    transform: rotateY(180deg) translateZ(5px);
}

#coin i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    margin-top: -5px;
    margin-left: -9px;
    width: 18px;
    height: 10px;
    background: #777;
    background-image: linear-gradient(to bottom, #BBB, #D6AF54);
    transform: rotateX(90deg) translateZ(99.7px);
}

#coin i:nth-child(1) { transform: rotateX(90deg) rotateY( 0deg ) translateZ(99.7px); }
#coin i:nth-child(2) { transform: rotateX(90deg) rotateY( 10deg ) translateZ(99.7px); }
#coin i:nth-child(3) { transform: rotateX(90deg) rotateY( 20deg ) translateZ(99.7px); }
#coin i:nth-child(4) { transform: rotateX(90deg) rotateY( 30deg ) translateZ(99.7px); }
#coin i:nth-child(5) { transform: rotateX(90deg) rotateY( 40deg ) translateZ(99.7px); }
#coin i:nth-child(6) { transform: rotateX(90deg) rotateY( 50deg ) translateZ(99.7px); }
#coin i:nth-child(7) { transform: rotateX(90deg) rotateY( 60deg ) translateZ(99.7px); }
#coin i:nth-child(8) { transform: rotateX(90deg) rotateY( 70deg ) translateZ(99.7px); }
#coin i:nth-child(9) { transform: rotateX(90deg) rotateY( 80deg ) translateZ(99.7px); }
#coin i:nth-child(10) { transform: rotateX(90deg) rotateY( 90deg ) translateZ(99.7px); }
#coin i:nth-child(11) { transform: rotateX(90deg) rotateY( 100deg ) translateZ(99.7px); }
#coin i:nth-child(12) { transform: rotateX(90deg) rotateY( 110deg ) translateZ(99.7px); }
#coin i:nth-child(13) { transform: rotateX(90deg) rotateY( 120deg ) translateZ(99.7px); }
#coin i:nth-child(14) { transform: rotateX(90deg) rotateY( 130deg ) translateZ(99.7px); }
#coin i:nth-child(15) { transform: rotateX(90deg) rotateY( 140deg ) translateZ(99.7px); }
#coin i:nth-child(16) { transform: rotateX(90deg) rotateY( 150deg ) translateZ(99.7px); }
#coin i:nth-child(17) { transform: rotateX(90deg) rotateY( 160deg ) translateZ(99.7px); }
#coin i:nth-child(18) { transform: rotateX(90deg) rotateY( 170deg ) translateZ(99.7px); }
#coin i:nth-child(19) { transform: rotateX(90deg) rotateY( 180deg ) translateZ(99.7px); }
#coin i:nth-child(20) { transform: rotateX(90deg) rotateY( 190deg ) translateZ(99.7px); }
#coin i:nth-child(21) { transform: rotateX(90deg) rotateY( 200deg ) translateZ(99.7px); }
#coin i:nth-child(22) { transform: rotateX(90deg) rotateY( 210deg ) translateZ(99.7px); }
#coin i:nth-child(23) { transform: rotateX(90deg) rotateY( 220deg ) translateZ(99.7px); }
#coin i:nth-child(24) { transform: rotateX(90deg) rotateY( 230deg ) translateZ(99.7px); }
#coin i:nth-child(25) { transform: rotateX(90deg) rotateY( 240deg ) translateZ(99.7px); }
#coin i:nth-child(26) { transform: rotateX(90deg) rotateY( 250deg ) translateZ(99.7px); }
#coin i:nth-child(27) { transform: rotateX(90deg) rotateY( 260deg ) translateZ(99.7px); }
#coin i:nth-child(28) { transform: rotateX(90deg) rotateY( 270deg ) translateZ(99.7px); }
#coin i:nth-child(29) { transform: rotateX(90deg) rotateY( 280deg ) translateZ(99.7px); }
#coin i:nth-child(30) { transform: rotateX(90deg) rotateY( 290deg ) translateZ(99.7px); }
#coin i:nth-child(31) { transform: rotateX(90deg) rotateY( 300deg ) translateZ(99.7px); }
#coin i:nth-child(32) { transform: rotateX(90deg) rotateY( 310deg ) translateZ(99.7px); }
#coin i:nth-child(33) { transform: rotateX(90deg) rotateY( 320deg ) translateZ(99.7px); }
#coin i:nth-child(34) { transform: rotateX(90deg) rotateY( 330deg ) translateZ(99.7px); }
#coin i:nth-child(35) { transform: rotateX(90deg) rotateY( 340deg ) translateZ(99.7px); }
#coin i:nth-child(36) { transform: rotateX(90deg) rotateY( 350deg ) translateZ(99.7px); }

#shadow {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 5px 5px #000;
    opacity: .7;
    z-index: 1;
}