@keyframes shake {
	0% {
		transform: none;
	}
	10% {
		transform: translate(0, -5px);
	}
	20% {
		transform: translate(0, 5px);
	}
	30% {
		transform: translate(0, -5px);
	}
	40% {
		transform: translate(0, 5px);
	}
	50% {
		transform: translate(0, -5px);
	}
	60% {
		transform: translate(0, 5px);
	}
	70% {
		transform: none;
	}
	80% {
		transform: none;
	}
	90% {
		transform: none;
	}
	100% {
		transform: none;
	}

}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial;
	margin: 0;
	height: 100vh;
	width: 100vw;
	background: linear-gradient(45deg, #333, #111);
}
button {
	display: none;
	padding: 10px;
}
header, footer {
	width: 100vw;
	position: fixed;
	text-align: center;
	font-size: 3vh;
	color: #FFF;
	font-weight: bolder;
}
header {
	left: 0;
	top: 2vh;
}
footer {
	left: 0;
	bottom: 2vh;
}
#ball {
	background: linear-gradient(45deg, #222, #000, #000, #000);
	border-radius: 50%;
	flex-wrap: wrap;
	height: 750px;
	max-height: 50vh;
	aspect-ratio: 1 / 1;
	overflow: clip;
	position: relative;
	margin: 0;
	box-shadow: 3px -3px 6px #000;
	animation: shake 2s linear infinite;
}
#label, #eye {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	left: 30%;
	top: 30%;
	background: #FFF;
	color: #000;
	font-size: 12vh;
	border-radius: 50%;
	height: 40%;
	width: 40%;
	transition: transform 1.25s ease;
	pointer-events: none;
	overflow: clip;
}
#eye {
	left: calc(30% - 2px);
	top: calc(30% - 2px);
	border: solid 4px #222;
	background: radial-gradient(#000, #005);
	color: #00A;
	font-size: 2.5vh;
	font-weight: bold;
	transform: translate(-175%, 175%) rotateX(-90deg) rotateY(-45deg) rotateZ(-90deg);
}
#ball:hover {
	animation: unset;
	background: linear-gradient(45deg, #2A2A2A, #050505, #000, #000);
}
#ball:hover > #label  {
	transform: translate(175%, -175%) rotateX(90deg) rotateY(45deg) rotateZ(-45deg);
}
#ball:hover > #eye {
	transform: rotateX(0) rotateY(0) rotateZ(0); translate(0%, 0%);
}
@media (max-width: 800px) {
	button {
		display: initial;
		background: transparent;
		color: #FFF;
		border: solid 2px #FFF;
		width: 50vw;
		position: absolute;
		left: 25vw;
		bottom: 7vh;
	}
}