*{margin:0;padding:0;font-family:Google Sans;font-weight:normal;letter-spacing:0.06em;user-select:none}body{background:linear-gradient(180deg, #2240E8 0%, #3D5AFE 100%);background-repeat:no-repeat}#wrapper{padding:40px 0;overflow:hidden}#wrapper header img.logo{margin:0px auto;display:block;width:100px;transition:all 200ms ease-in-out}@media only screen and (max-width: 500px){#wrapper header img.logo{width:80px}}#wrapper header hr{margin:10px auto;margin-top:14px;width:200px;background:rgba(255,255,255,0.3);border:none;height:1px}#wrapper header h2.title{color:#fff;text-align:center;text-shadow:0px 2px 1px rgba(0,0,0,0.25);font-size:1.4em;letter-spacing:0.08em}@media only screen and (max-width: 500px){#wrapper header h2.title{font-size:1.2em}}#wrapper .content{margin-top:50px}#wrapper .content h2.state{font-size:1em;color:#fff;text-align:center;text-shadow:0px 2px 1px rgba(0,0,0,0.25);margin-top:0;font-weight:bold}#wrapper .content h1.timer{text-align:center;font-weight:normal;font-size:6em;color:#FFF8E1;text-shadow:0px 3px 1px rgba(0,0,0,0.25);transition:all 200ms ease-in-out}@media only screen and (max-width: 500px){#wrapper .content h1.timer{font-size:4em}}#wrapper .content img.mascot{width:400px;position:relative;top:-20px;right:-60px;margin:0px auto;display:block;transition:all 200ms ease-in-out}@media only screen and (max-width: 500px){#wrapper .content img.mascot{width:300px}}#wrapper .controls{left:50%;bottom:25px;height:60px;width:60px;margin:0 auto;transition:all 200ms ease-in-out}#wrapper .controls svg{width:28px;height:28px;padding:14px;border-radius:50%;position:absolute;background:linear-gradient(135deg, #ff0 20%, #F2CC07 80%);fill:rgba(0,0,0,0.5);box-shadow:0px 3px 1px rgba(0,0,0,0.25);transition:transform 355ms cubic-bezier(0.18, 0.89, 0.32, 1.28)}@media only screen and (max-width: 350px){#wrapper .controls svg{width:32px;height:32px}}#wrapper .controls svg:nth-child(2){transform:scale(1.3);z-index:1}#wrapper .controls svg:nth-child(2):hover{transform:scale(1.4)}#wrapper .controls svg:nth-child(2):active{transform:scale(1.2)}#wrapper .isPlay svg:nth-child(1){transform:translateX(-120px)}#wrapper .isPlay svg:nth-child(1):hover{transform:translateX(-150px) scale(1.1)}#wrapper .isPlay svg:nth-child(1):active{transform:translateX(-150px) scale(0.9)}#wrapper .isPlay svg:nth-child(3){transform:translateX(120px)}#wrapper .isPlay svg:nth-child(3):hover{transform:translateX(150px) scale(1.1)}#wrapper .isPlay svg:nth-child(3):active{transform:translateX(150px) scale(0.9)}