body, html {
	padding: 0;
	margin: 0;
	overflow: hidden;
	animation: background 70s infinite;
	-webkit-animation: background 70s infinite;
	-moz-animation: background 70s infinite;
	-ms-animation: background 70s infinite;
	-o-animation: background 70s infinite;
	cursor: none;
}

.pointer {
	//background-color: red;
	position: absolute;
	width: 20px;
	height: 20px;
	background-image: url('pointer.png');
	background-repeat: no-repeat;
}

.pointer.rotate{
	transform-origin: top left;
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	animation: rotate 1.5s;
	-webkit-animation: rotate 1.5s;
	-ms-animation: rotate 1.5s;
	-o-animation: rotate 1.5s;
}

@keyframes rotate {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

@-webkit-keyframes rotate {
	0%{-webkit-transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
	0%{-moz-transform: rotate(0deg);}
	100%{-moz-transform: rotate(360deg);}
}

@-ms-keyframes rotate {
	0%{-ms-transform: rotate(0deg);}
	100%{-ms-transform: rotate(360deg);}
}

@-o-keyframes rotate {
	0%{-o-transform: rotate(0deg);}
	100%{-o-transform: rotate(360deg);}
}

.pointer.grow{
	animation: grow 1.5s;
	-webkit-animation: grow 1.5s;
	-ms-animation: grow 1.5s;
	-o-animation: grow 1.5s;
}

@keyframes grow {
	0%{transform: scale(1);}
	50%{transform: scale(2);}
	100%{transform: scale(1);}
}

@-webkit-keyframes grow {
	0%{-webkit-transform: scale(1);}
	50%{-webkit-transform: scale(2);}
	100%{-webkit-transform: scale(1);}
}

@-moz-keyframes grow {
	0%{-moz-transform: scale(1);}
	50%{-moz-transform: scale(2);}
	100%{-moz-transform: scale(1);}
}

@-ms-keyframes grow {
	0%{-ms-transform: scale(1);}
	50%{-ms-transform: scale(2);}
	100%{-ms-transform: scale(1);}
}

@-o-keyframes grow {
	0%{-o-transform: scale(1);}
	50%{-o-transform: scale(2);}
	100%{-o-transform: scale(1);}
}

.pointer.square{
	animation: square 1.5s;
	-webkit-animation: square 1.5s;
	-ms-animation: square 1.5s;
	-o-animation: square 1.5s;
}

@keyframes square {
	0%{transform: translate(0,0);}
	25%{transform: translate(0,-50px);}
	50%{transform: translate(50px,-50px);}
	75%{transform: translate(50px,0);}
	100%{transform: translate(0,0);}
}

@-webkit-keyframes square {
	0%{-webkit-transform: translate(0,0);}
	25%{-webkit-transform: translate(0,-50px);}
	50%{-webkit-transform: translate(50px,-50px);}
	75%{-webkit-transform: translate(50px,0);}
	100%{-webkit-transform: translate(0,0);}
}

@-moz-keyframes square {
	0%{-moz-transform: translate(0,0);}
	25%{-moz-transform: translate(0,-50px);}
	50%{-moz-transform: translate(50px,-50px);}
	75%{-moz-transform: translate(50px,0);}
	100%{-moz-transform: translate(0,0);}
}

@-ms-keyframes square {
	0%{-ms-transform: translate(0,0);}
	25%{-ms-transform: translate(0,-50px);}
	50%{-ms-transform: translate(50px,-50px);}
	75%{-ms-transform: translate(50px,0);}
	100%{-ms-transform: translate(0,0);}
}

@-o-keyframes square {
	0%{-o-transform: translate(0,0);}
	25%{-o-transform: translate(0,-50px);}
	50%{-o-transform: translate(50px,-50px);}
	75%{-o-transform: translate(50px,0);}
	100%{-o-transform: translate(0,0);}
}

.pointer.flipX{
	animation: flipX 1.5s;
	-webkit-animation: flipX 1.5s;
	-ms-animation: flipX 1.5s;
	-o-animation: flipX 1.5s;
}

@keyframes flipX {
	0%{transform: rotateX(0deg);}
	100%{transform: rotateX(360deg);}
}

@-webkit-keyframes flipX {
	0%{-webkit-transform: rotateX(0deg);}
	100%{-webkit-transform: rotateX(360deg);}
}

@-moz-keyframes flipX {
	0%{-moz-transform: rotateX(0deg);}
	100%{-moz-transform: rotateX(360deg);}
}

@-ms-keyframes flipX {
	0%{-ms-transform: rotateX(0deg);}
	100%{-ms-transform: rotateX(360deg);}
}

@-o-keyframes flipX {
	0%{-o-transform: rotateX(0deg);}
	100%{-o-transform: rotateX(360deg);}
}

.pointer.flipY{
	animation: flipY 1.5s;
	-webkit-animation: flipY 1.5s;
	-ms-animation: flipY 1.5s;
	-o-animation: flipY 1.5s;
}

@keyframes flipY {
	0%{transform: rotateY(0deg);}
	100%{transform: rotateY(360deg);}
}

@-webkit-keyframes flipY {
	0%{-webkit-transform: rotateY(0deg);}
	100%{-webkit-transform: rotateY(360deg);}
}

@-moz-keyframes flipY {
	0%{-moz-transform: rotateY(0deg);}
	100%{-moz-transform: rotateY(360deg);}
}

@-ms-keyframes flipY {
	0%{-ms-transform: rotateY(0deg);}
	100%{-ms-transform: rotateY(360deg);}
}

@-o-keyframes flipY {
	0%{-o-transform: rotateY(0deg);}
	100%{-o-transform: rotateY(360deg);}
}


#wrapper {
	width: 3000px;
	height: 3000px;
	//background-color: yellow;
	position: absolute;
	left: 0;
	top: 0;
}

@keyframes background {
	0%{background:#EA2682;}
	25%{background:#1EA2F7;}
	50%{background:#2BDE9A;}
	75%{background:#1EA2F7;}
	100%{background:#EA2682;}
}

@-webkit-keyframes background {
	0%{background:#EA2682;}
	25%{background:#1EA2F7;}
	50%{background:#2BDE9A;}
	75%{background:#1EA2F7;}
	100%{background:#EA2682;}
}

/*@-webkit-keyframes background {
	0%{background:#f5b5bc;}
	25%{background:#d3abfb;}
	50%{background:#afe0f9;}
	75%{background:#d3abfb;}
	100%{background:#f5b5bc;}
}

@-moz-keyframes background {
	0%{background:#f5b5bc;}
	25%{background:#d3abfb;}
	50%{background:#afe0f9;}
	75%{background:#d3abfb;}
	100%{background:#f5b5bc;}
}

@-ms-keyframes background {
	0%{background:#f5b5bc;}
	25%{background:#d3abfb;}
	50%{background:#afe0f9;}
	75%{background:#d3abfb;}
	100%{background:#f5b5bc;}
}

@-o-keyframes background {
	0%{background:#f5b5bc;}
	25%{background:#d3abfb;}
	50%{background:#afe0f9;}
	75%{background:#d3abfb;}
	100%{background:#f5b5bc;}
}*/