html, body {
	cursor: url(img/fork.svg), auto;
	overflow: hidden;
}

html:active, body:active, a:hover {
	cursor: url(img/fork-active.svg), auto;
}


body {
	background-color:#FF33EC;
	margin:0;
	padding:0;
	height:100vh;
	width:100vw;
	display:flex;
	align-items:center;
	justify-content: center;
	animation: bg 15s ease infinite;
	-ms-overflow-style: none;  /* No scrollbar IE and Edge */
  	scrollbar-width: none;	/* No scrollbar Firefox */
}


body a#mail {
	transform: scale(.5);
}

body div#logo {
	width:calc(15400px/22);
	height:647px;
	background:url(img/ptf-sprite.webp) no-repeat;
	animation:sprite 1.5s steps(21) infinite;

}


@keyframes sprite {
	from {
		background-position-x: 0px;
	}
	to {
		background-position-x: -14700px;
	}
}

@keyframes bg {
	0% {
		background-color: #FF33EC;
	}

	25% {
		background-color: #D94CFF;
	}

	50% {
		background-color: #DFFF00;
	}

	75% {
		background-color: #FF1C91;
	}

	100% {
		background-color: #FF33EC;
	}
}

@media only screen and (max-width:768px) {
	body a#mail {
		transform: scale(.35);
	}
}