@import url("../base-game-page.css");

.rave-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;

	background:
		radial-gradient(circle at 15% 30%, rgba(255, 0, 180, 0.22), transparent 50%),
		radial-gradient(circle at 80% 25%, rgba(0, 255, 255, 0.22), transparent 55%),
		radial-gradient(circle at 50% 80%, rgba(255, 255, 0, 0.18), transparent 60%),
		radial-gradient(circle at 30% 70%, rgba(0, 255, 120, 0.15), transparent 65%);

	mix-blend-mode: screen;
	animation: 
		rave-drift 4s infinite alternate ease-in-out,
		rave-pulse 2s infinite ease-in-out;
}

@keyframes rave-drift {
	0% {
		transform: translate(0, 0) scale(1);
		filter: hue-rotate(0deg) blur(0px);
	}
	100% {
		transform: translate(-20px, 15px) scale(1.05);
		filter: hue-rotate(360deg) blur(2px);
	}
}

@keyframes rave-pulse {
	0%, 100% { opacity: 0.9; }
	50% { opacity: 1; }
}

html {
    background-image: url("bgHeroParty.jpg");
    background-attachment: fixed;
    background-size: 100%;
}

.content {
	border: rgba(138,0,255,0.35) 6px solid;
	border-radius: 150px;
	background-color: rgba(255,0,204,0.5);
	padding-left: 150px;
	padding-right: 150px;
}

.logo img {
	border-radius: 80px;
}

.screenshots img {
	border-radius: 60px;
}

iframe {
	border-radius: 120px;
}

.content p {
	color: #00FFE5;
	text-shadow: black 2px 2px 2px;
}

.section {
	border: rgba(127,0,255,0.6) 8px solid;
	border-radius: 55px;
	background: rgba(0,255,229, 0.25);
	background-size: 100%;
}

.section h2 {
	color: #5A3DFF;
	text-shadow: #00FF66 2px 2px 2px;
}

.content li {
	color: #00FFE5;
	text-shadow: black 2px 2px 2px;
}

li::marker {
	color: #00FFF5;
}

td {
	border: #7F00FF 4px solid;
	border-radius: 25px;
	background-color: rgba(0,191,255, 0.25);
	padding: 12px;
	width: 24%;
	font-size: 16px;
	text-align: center;
	color: #00FFE5;
}

a {
	color: #3366FF;
}