rDrama/files/events/assets/css/banner.css

/* text */
#banner-halloween-title.life > tspan {
	opacity: 1;
}
#banner-halloween-title-II {
	text-shadow: 0 4px 10px #ff000060;
}
#banner-halloween-title.life > #banner-halloween-title-II {
	animation: blinker 0.5s forwards;
}
@media (max-width: 767.98px) {
	#banner-halloween-title {
		transform: scale(1.4) translate(-90px, -120px);
		animation:none !important;
	}
	#banner-halloween-presenting {
		transform: scale(1.4) translate(-90px, -120px);
	}
	#banner-halloween-bats {
		display:none;
	}
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-6px);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes blinker {
	10% {
		opacity: 0;
	}
	,
	30% {
		opacity: 0.4;
	}
	,
	60% {
		opacity: 0.2;
	}
	,
	85% {
		opacity: 0.5;
	}
	,
	100% {
		opacity: 0.9;
	}
}

svg g {
	color: unset;
}

/* stars */
.star {
	animation: linear infinite snow;
}

.star1 {
	animation-duration: 3s;
}

.star2 {
	animation-duration: 4s;
}

.star3 {
	animation-duration: 3.5s;
}

.star4 {
	animation-duration: 2s;
}

.star5 {
	animation-duration: 4s;
}

.star1 circle {
	r: 0.5;
}
.star2 circle {
	r: 0.75;
}
.star3 circle {
	r: 1.0;
}
.star4 circle {
	r: 1.2;
}
.star5 circle {
	r: 1.5;
}

@media (max-width: 767.98px) {
	.star {
		animation: none;
		fill-opacity: 0.5;
	}
	.star1 circle {
		r: 1;
	}
	.star2 circle {
		r: 1.5;
	}
	.star3 circle {
		r: 2;
	}
	.star4 circle {
		r: 2;
	}
	.star5 circle {
		r: 2.5;
	}
}

@keyframes twinkle {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes snow {
	100% {
		transform: translateY(150px);
	}
}