@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
*{box-sizing:border-box}body{font-family:"Roboto",sans-serif;margin:0;height:100vh;overflow:hidden}h4{font-size:20px;margin:5px;text-transform:uppercase}.counter{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}.counter.hide{transform:translate(-50%, -50%) scale(0);animation:hide .2s ease-out}@keyframes hide{0%{transform:translate(-50%, -50%) scale(1)}100%{transform:translate(-50%, -50%) scale(0)}}.final{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);text-align:center}.final.show{transform:translate(-50%, -50%) scale(1);animation:show .2s ease-out}@keyframes show{0%{transform:translate(-50%, -50%) scale(0)}30%{transform:translate(-50%, -50%) scale(1.4)}100%{transform:translate(-50%, -50%) scale(1)}}.nums{color:#3498db;font-size:50px;position:relative;overflow:hidden;width:250px;height:50px}.nums span{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(120deg);transform-origin:bottom center}.nums span.in{transform:translate(-50%, -50%) rotate(0deg);animation:goIn .5s ease-in-out}.nums span.out{animation:goOut .5s ease-in-out}@keyframes goIn{0%{transform:translate(-50%, -50%) rotate(120deg)}30%{transform:translate(-50%, -50%) rotate(-20deg)}60%{transform:translate(-50%, -50%) rotate(10deg)}100%{transform:translate(-50%, -50%) rotate(0deg)}}@keyframes goOut{0%{transform:translate(-50%, -50%) rotate(0deg)}60%{transform:translate(-50%, -50%) rotate(20deg)}100%{transform:translate(-50%, -50%) rotate(-120deg)}}#replay{background-color:#3498db;border-radius:3px;border:none;color:#f0f8ff;padding:5px;text-align:center;display:inline-block;cursor:pointer;transition:all .3s}#replay span{cursor:pointer;display:inline-block;position:relative;transition:.3s}#replay span:after{content:"»";position:absolute;opacity:0;top:0;right:-20px;transition:.5s}#replay:hover span{padding-right:25px}#replay:hover span:after{opacity:1;right:0}