@property --blue-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --blue-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --purple-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --purple-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --red-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --red-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --orange-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --orange-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --green-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --green-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --yellow-x {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

@property --yellow-y {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: false;
}

.panel {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #000000;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 1;
}

.panel-video::before {
	
}

.panel-image::before {
	
}

.panel-music::before {
	
}

.panel-content {
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@keyframes moveGradientsVideo {
	0%,
	100% {
		--blue-x: -40%;
		--blue-y: 35%;
		--purple-x: 35%;
		--purple-y: -10%;
		--red-x: -10%;
		--red-y: -80%;
		--orange-x: 50%;
		--orange-y: 145%;
		--green-x: 0%;
		--green-y: 80%;
		--yellow-x: 35%;
		--yellow-y: 95%;
	}
	25% {
		--blue-x: 30%;
		--blue-y: -25%;
		--purple-x: 5%;
		--purple-y: 40%;
		--red-x: 45%;
		--red-y: 150%;
		--orange-x: -15%;
		--orange-y: 30%;
		--green-x: 45%;
		--green-y: 15%;
		--yellow-x: -20%;
		--yellow-y: -40%;
	}
	50% {
		--blue-x: 70%;
		--blue-y: 50%;
		--purple-x: 50%;
		--purple-y: 120%;
		--red-x: 35%;
		--red-y: -80%;
		--orange-x: 75%;
		--orange-y: -75%;
		--green-x: 85%;
		--green-y: 100%;
		--yellow-x: 50%;
		--yellow-y: -20%;
	}
	75% {
		--blue-x: -25%;
		--blue-y: 10%;
		--purple-x: 35%;
		--purple-y: -45%;
		--red-x: -10%;
		--red-y: 30%;
		--orange-x: 20%;
		--orange-y: -40%;
		--green-x: -15%;
		--green-y: 50%;
		--yellow-x: 45%;
		--yellow-y: -15%;
	}
}

@keyframes moveGradientsImage {
	0%,
	100% {
		--blue-x: -20%;
		--blue-y: 75%;
		--purple-x: 65%;
		--purple-y: -40%;
		--red-x: 20%;
		--red-y: 110%;
		--orange-x: 85%;
		--orange-y: 15%;
		--green-x: -10%;
		--green-y: -30%;
		--yellow-x: 55%;
		--yellow-y: 80%;
	}
	25% {
		--blue-x: 40%;
		--blue-y: 130%;
		--purple-x: 10%;
		--purple-y: 25%;
		--red-x: -40%;
		--red-y: -20%;
		--orange-x: 60%;
		--orange-y: 90%;
		--green-x: 30%;
		--green-y: -60%;
		--yellow-x: 95%;
		--yellow-y: 45%;
	}
	50% {
		--blue-x: 85%;
		--blue-y: 65%;
		--purple-x: 45%;
		--purple-y: 110%;
		--red-x: 15%;
		--red-y: -70%;
		--orange-x: -25%;
		--orange-y: 35%;
		--green-x: 75%;
		--green-y: 25%;
		--yellow-x: 10%;
		--yellow-y: -45%;
	}
	75% {
		--blue-x: 60%;
		--blue-y: -20%;
		--purple-x: -15%;
		--purple-y: 60%;
		--red-x: 80%;
		--red-y: 40%;
		--orange-x: 25%;
		--orange-y: -50%;
		--green-x: 70%;
		--green-y: 120%;
		--yellow-x: -30%;
		--yellow-y: 20%;
	}
}

@keyframes moveGradientsMusic {
	0%,
	100% {
		--blue-x: 25%;
		--blue-y: -30%;
		--purple-x: -20%;
		--purple-y: 85%;
		--red-x: 90%;
		--red-y: 50%;
		--orange-x: 15%;
		--orange-y: 120%;
		--green-x: 70%;
		--green-y: -15%;
		--yellow-x: -40%;
		--yellow-y: 35%;
	}
	25% {
		--blue-x: 80%;
		--blue-y: 85%;
		--purple-x: 35%;
		--purple-y: -45%;
		--red-x: -30%;
		--red-y: 15%;
		--orange-x: 95%;
		--orange-y: 70%;
		--green-x: 20%;
		--green-y: 140%;
		--yellow-x: 65%;
		--yellow-y: -25%;
	}
	50% {
		--blue-x: -15%;
		--blue-y: 45%;
		--purple-x: 75%;
		--purple-y: 30%;
		--red-x: 40%;
		--red-y: -80%;
		--orange-x: -35%;
		--orange-y: -20%;
		--green-x: 55%;
		--green-y: 95%;
		--yellow-x: 85%;
		--yellow-y: 60%;
	}
	75% {
		--blue-x: 50%;
		--blue-y: 110%;
		--purple-x: 5%;
		--purple-y: -60%;
		--red-x: 70%;
		--red-y: 25%;
		--orange-x: 45%;
		--orange-y: -70%;
		--green-x: -25%;
		--green-y: 10%;
		--yellow-x: 20%;
		--yellow-y: 130%;
	}
}