@import"https://fonts.googleapis.com/css?family=Raleway:900";:root{--flips: 540deg}*,*:before,*:after{box-sizing:border-box}body{background:#3e3b3b;display:grid;place-items:center;min-height:100vh;overflow:hidden}.coin{height:150px;width:150px;transform-style:preserve-3d;transform-origin:50%;cursor:grab}.coin.anim{animation:flip 1s linear forwards}.coin:before,.coin:after{display:grid;place-items:center;position:absolute;height:100%;width:100%;border-radius:50%;background:#f7941e;border:12px solid #f8a037;box-shadow:inset 0 0 0 3px #f38809;font-size:60px;font-family:Raleway,sans-serif;color:#f38809;text-shadow:1.5px 1.5px 0 #e48008,-1.5px -1.5px 0 #f8a745}.coin:before{transform:translateZ(12.5px);content:"G";color:#4285f4}.coin:after{transform:translateZ(-12.5px) rotateY(180deg) rotate(180deg);content:"e";color:#ea4335}.coin .edge{transform:translate(62.5px);transform-style:preserve-3d;backface-visibility:hidden}.coin .edge .segment{height:150px;width:25px;position:absolute;transform-style:preserve-3d;backface-visibility:hidden}.coin .edge .segment:before,.coin .edge .segment:after{content:"";display:block;height:15px;width:25px;position:absolute;transform:rotateX(84.375deg)}.coin .edge .segment:before{transform-origin:top center;background:repeating-linear-gradient(#f38809 0 25%,#da7a08 25% 50%)}.coin .edge .segment:after{bottom:0;transform-origin:center bottom;background:repeating-linear-gradient(#da7a08 0 25%,#f38809 25% 50%)}.coin .edge .segment:nth-child(1){transform:rotateY(90deg) rotateX(11.25deg)}.coin .edge .segment:nth-child(2){transform:rotateY(90deg) rotateX(22.5deg)}.coin .edge .segment:nth-child(3){transform:rotateY(90deg) rotateX(33.75deg)}.coin .edge .segment:nth-child(4){transform:rotateY(90deg) rotateX(45deg)}.coin .edge .segment:nth-child(5){transform:rotateY(90deg) rotateX(56.25deg)}.coin .edge .segment:nth-child(6){transform:rotateY(90deg) rotateX(67.5deg)}.coin .edge .segment:nth-child(7){transform:rotateY(90deg) rotateX(78.75deg)}.coin .edge .segment:nth-child(8){transform:rotateY(90deg) rotateX(90deg)}.coin .edge .segment:nth-child(9){transform:rotateY(90deg) rotateX(101.25deg)}.coin .edge .segment:nth-child(10){transform:rotateY(90deg) rotateX(112.5deg)}.coin .edge .segment:nth-child(11){transform:rotateY(90deg) rotateX(123.75deg)}.coin .edge .segment:nth-child(12){transform:rotateY(90deg) rotateX(135deg)}.coin .edge .segment:nth-child(13){transform:rotateY(90deg) rotateX(146.25deg)}.coin .edge .segment:nth-child(14){transform:rotateY(90deg) rotateX(157.5deg)}.coin .edge .segment:nth-child(15){transform:rotateY(90deg) rotateX(168.75deg)}.coin .edge .segment:nth-child(16){transform:rotateY(90deg) rotateX(180deg)}.floor{position:absolute;width:150px;height:150px}.floor .line{position:absolute;top:50%;left:50%;margin-top:-3.125px;width:150px;height:6.25px;transform-origin:center left;border-radius:6.25px;background:linear-gradient(90deg,white 20%,transparent 20%);background-repeat:no-repeat;opacity:0}.floor .line.anim{animation:lines .6s ease-out forwards;animation-delay:.65s}.floor .line:nth-child(1){transform:rotate(30deg) scale(1.1)}.floor .line:nth-child(2){transform:rotate(60deg)}.floor .line:nth-child(3){transform:rotate(90deg) scale(1.1)}.floor .line:nth-child(4){transform:rotate(120deg)}.floor .line:nth-child(5){transform:rotate(150deg) scale(1.1)}.floor .line:nth-child(6){transform:rotate(180deg)}.floor .line:nth-child(7){transform:rotate(210deg) scale(1.1)}.floor .line:nth-child(8){transform:rotate(240deg)}.floor .line:nth-child(9){transform:rotate(270deg) scale(1.1)}.floor .line:nth-child(10){transform:rotate(300deg)}.floor .line:nth-child(11){transform:rotate(330deg) scale(1.1)}.floor .line:nth-child(12){transform:rotate(360deg)}@keyframes flip{0%{transform:rotateY(0) rotateX(0) scale(1)}10%{transform:rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6)}60%{transform:rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2)}to{transform:rotateY(0) rotateX(var(--flips)) scale(1)}}@keyframes lines{40%{opacity:1;background-position:-120px 0}70%{opacity:1;background-position:75px 0}to{opacity:1;background-position:150px 0}}