body,
html {
	height: 100%;
	margin: 0;
	padding: 0;
	background: radial-gradient(circle, #0e0e0e, #222, #333);
	color: #7cfc00;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Press Start 2P', cursive;
	overflow: hidden;
	cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1157.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1157.png), auto !important;
}


.intro {
	position: absolute;
	top: 20%;
	width: 100%;
	text-align: center;
	color: #ff00ff;
	font-size: 2.5rem;
	z-index: 10;
	margin-bottom: 3rem;
	text-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00, 0 0 90px #00ff00;
	animation: extreme-glitch 1s infinite, shake 0.7s infinite alternate;
	transform: rotate(-10deg);
	cursor: crosshair;
}

.logo-container {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	animation: pulse 1s infinite alternate, rotate 2s infinite alternate cubic-bezier(0.68, -0.55, 0.27, 1.55);
	filter: hue-rotate(720deg);
	cursor: none;
}

.logo {
	max-width: 100%;
	height: auto;
	animation: spin 5s linear infinite, glitch-logo 0.5s infinite alternate, flash-color 0.3s infinite alternate;

}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1) translateX(-50%);
		filter: brightness(1);
	}

	100% {
		transform: scale(1.15) translateX(-50%);
		filter: brightness(3);
	}
}

@keyframes extreme-glitch {
	0% {
		text-shadow: -10px -10px 5px #ff00ff, 10px 10px 5px #00ffff;
		transform: skewX(20deg) rotate(-5deg);
	}

	25% {
		text-shadow: 10px 10px 5px #ff00ff, -10px -10px 5px #00ffff;
		transform: skewX(-20deg) rotate(5deg);
	}

	50% {
		text-shadow: -20px 20px 5px #ff00ff, 20px -20px 5px #00ffff;
		transform: skewY(20deg) rotate(-10deg);
	}

	75% {
		text-shadow: 20px -20px 5px #ff00ff, -20px 20px 5px #00ffff;
		transform: skewY(-20deg) rotate(10deg);
	}

	100% {
		text-shadow: -10px 10px 5px #ff00ff, 10px -10px 5px #00ffff;
		transform: skewX(20deg) skewY(20deg) rotate(-5deg);
	}
}

@keyframes glitch-logo {
	0% {
		transform: rotate(0deg) scale(1);
	}

	50% {
		transform: rotate(45deg) scale(1.5);
	}

	100% {
		transform: rotate(-45deg) scale(0.7);
	}
}

@keyframes flash-color {
	0% {
		filter: hue-rotate(0deg);
	}

	100% {
		filter: hue-rotate(360deg);
	}
}

@keyframes shake {
	0% {
		transform: translate(2px, 2px) rotate(0deg);
	}

	10% {
		transform: translate(-2px, -4px) rotate(-2deg);
	}

	20% {
		transform: translate(-6px, 0px) rotate(2deg);
	}

	30% {
		transform: translate(6px, 4px) rotate(0deg);
	}

	40% {
		transform: translate(2px, -2px) rotate(2deg);
	}

	50% {
		transform: translate(-2px, 4px) rotate(-2deg);
	}

	60% {
		transform: translate(-6px, 2px) rotate(0deg);
	}

	70% {
		transform: translate(6px, 2px) rotate(-2deg);
	}

	80% {
		transform: translate(-2px, -2px) rotate(2deg);
	}

	90% {
		transform: translate(2px, 4px) rotate(0deg);
	}

	100% {
		transform: translate(2px, -4px) rotate(-2deg);
	}
}

.logo-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 40px);
	max-width: 600px;
	box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff, 0 0 90px #00ffff;
	overflow: hidden;
	border-radius: 50%;
	margin-top: 8rem;
}

.logo:hover {
	animation: none;
	transform: rotate(180deg) scale(1.3);
}