body.wrong{-webkit-animation:bg-red 2s ease;animation:bg-red 2s ease}body.correct{-webkit-animation:bg-green 2s ease;animation:bg-green 2s ease}#pin .info{font-size:1em}.mdp-sheet{height:90vh;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}#pin{background:#f7931e;width:20em;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;border-radius:.3em;box-shadow:4px 4px 8px rgba(0,0,0,.3);margin:auto;color:#fff}.dots{width:50%;display:-webkit-box;display:flex;justify-content:space-around;padding-top:3em}.dot{position:relative;background:rgba(255,255,255,.2);border-radius:1.6em;width:1.6em;height:1.6em;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}.dot.active{-webkit-animation:growDot .5s ease;animation:growDot .5s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.dot.wrong{-webkit-animation:wrong .9s ease;animation:wrong .9s ease}.dot.correct{-webkit-animation:correct .9s ease;animation:correct .9s ease}#pin p{font-size:.8em}.numbers{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-align:center;align-items:center;justify-content:space-around;align-content:flex-end;margin:2em 0}.number{position:relative;width:2.5em;height:2.5em;margin:.5em;border-radius:2.5em;border:2px solid rgba(255,255,255,0);text-align:center;line-height:2.5em;font-weight:400;font-size:1.8em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .5s ease;transition:all .5s ease}.number:hover{color:rgba(255,255,255,.5)}.number:hover:before{border:2px solid rgba(255,255,255,.5)}.number:before{content:"";position:absolute;left:-2px;width:2.5em;height:2.5em;border:2px solid rgba(255,255,255,.1);border-radius:2.5em;-webkit-transition:all .5s ease;transition:all .5s ease}.number.grow:before{-webkit-animation:grow .6s ease;animation:grow .6s ease}@-webkit-keyframes growDot{100%{background:#fff;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}}@keyframes growDot{100%{background:#fff;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}}@-webkit-keyframes grow{50%{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes grow{50%{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes wrong{20%{background:#dc143c;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);left:0}40%{left:-5px}60%{left:10px}80%{left:-5px}}@keyframes wrong{20%{background:#dc143c;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);left:0}40%{left:-5px}60%{left:10px}80%{left:-5px}}@-webkit-keyframes correct{20%{background:#32cd32;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);top:0}40%{top:-5px}60%{top:10px}80%{top:-5px}}@keyframes correct{20%{background:#32cd32;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);top:0}40%{top:-5px}60%{top:10px}80%{top:-5px}}@-webkit-keyframes bg-red{50%{background:#dc143c}}@keyframes bg-red{50%{background:#dc143c}}@-webkit-keyframes bg-green{50%{background:#32cd32}}@keyframes bg-green{50%{background:#32cd32}}