body {
  text-align: center;
  margin: 0;
  overflow: hidden;
  cursor: grab;
  background-image: url(bg.jpg);
  background-size:cover;
}
.flipers {
width:30%;
}
body:active{
	cursor: grabbing;
}
canvas {
  margin: 0px auto;
  transform:scale(1);
}
#timer {
  color:rgb(0,250,73);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 5vw #000, 0px 2px 10px #000;
  position: fixed;
  font-size: 2.8em;
  font-family: "Yantramanav", sans-serif;
  font-weight: 900;
  text-align: center;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  z-index: 1000;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.smaller{
  font-size:.7em;
  color:rgb(0,200,23);
}
#fullButton{
  position:fixed;
  top:0;
  left:50%;
  background-color:rgba(255,255,255,0.2);
  transform:translate(-50%);
  z-index:100;
  height:100%;
  width:10%;
}
.goCrazy{
  transform:scale(1.4) rotate(5deg);
  font-size:1.6em;
  animation:crazy;
	animation-iteration-count:infinite;
	animation-duration:2s;
}
@keyframes crazy{
  0%{transform:translate(-50%,-50%) scale(1)}
  25%{transform:translate(-50%,-50%) scale(1.2) rotate(30deg)}
  50%{transform:translate(-50%,-50%) scale(1.2) rotate(-30deg)}
  100%{transform:translate(-50%,-50%) scale(1)}
}