rDrama/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;
	}
}

/*days*/
:root {
	/*sky*/
	--sky-gradient-day1: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
	--sky-gradient-day2: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
	--sky-gradient-day3: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
	--sky-gradient-day4: radial-gradient(at bottom, #930184 -15%, #490272 60%);
	--sky-gradient-day5: radial-gradient(at bottom, #800073 -55%, #400179 60%);
	--sky-gradient-day6: radial-gradient(at bottom, #69017a 25%, #390271 70%);
	--sky-gradient-day7: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
	--sky-gradient-day8: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
	--sky-gradient-day9: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
	--sky-gradient-day10: radial-gradient(at bottom, #59047b 10%, #150026 70%);
	
	/*moon*/
	--moon-fill-day1:gold;
	--moon-fill-day2:gold;
	--moon-fill-day3:goldenrod;
	--moon-fill-day4:none;
	--moon-fill-day5:none;
	--moon-fill-day6:#e4e4e4;
	--moon-fill-day7:#e4e4e4;
	--moon-fill-day8:#e4e4e4;
	--moon-fill-day9:#e4e4e4;
	--moon-fill-day10:#e4e4e4;

	--moon-shadow-day1:drop-shadow(0px 0px 20px yellow);
	--moon-shadow-day2:drop-shadow(0px 0px 20px yellow);
	--moon-shadow-day3:drop-shadow(0px 0px 20px gold);
	--moon-shadow-day4:none;
	--moon-shadow-day5:none;	
	--moon-shadow-day6:drop-shadow(0px 0px 5px #deddcf);
	--moon-shadow-day7:drop-shadow(0px 0px 10px #deddcf);
	--moon-shadow-day8:drop-shadow(0px 0px 10px #deddcf);
	--moon-shadow-day9:drop-shadow(0px 0px 10px #deddcf);
	--moon-shadow-day10:drop-shadow(0px 0px 10px #deddcf);

	--moon-position-day1:303;
	--moon-position-day2:308;
	--moon-position-day3:320;
	--moon-position-day4:350;
	--moon-position-day5:350;	
	--moon-position-day6:322;
	--moon-position-day7:312;
	--moon-position-day8:308;
	--moon-position-day9:303;
	--moon-position-day10:300;

	/*ground*/
	--ground-shadow-day1:#5818bd;
	--ground-shadow-day2:#5818bd;
	--ground-shadow-day3:#5818bd;
	--ground-shadow-day4:#5818bd;
	--ground-shadow-day5:#5818bd;	
	--ground-shadow-day6:#5818bd;
	--ground-shadow-day7:#4e16a6;	
	--ground-shadow-day8:#51009a;
	--ground-shadow-day9:#4b028c;
	--ground-shadow-day10:#41017b;
	
	--house-shadow-day1:#5818bd;
	--house-shadow-day2:#5818bd;
	--house-shadow-day3:#5818bd;
	--house-shadow-day4:#5818bd;
	--house-shadow-day5:#5818bd;	
	--house-shadow-day6:#5818bd;
	--house-shadow-day7:#5818bd;
	--house-shadow-day8:#4a149f;
	--house-shadow-day9:#431290;
	--house-shadow-day10:#3a1476;
	
	--object-fill-day1:#240441;
	--object-fill-day2:#240441;
	--object-fill-day3:#240441;
	--object-fill-day4:#240441;
	--object-fill-day5:#240441;	
	--object-fill-day6:#240441;
	--object-fill-day7:#240441;
	--object-fill-day8:#1e0538;
	--object-fill-day9:#18042c;
	--object-fill-day10:#18042c;

	--star-opacity-day1: 0;
	--star-opacity-day2: 0;
	--star-opacity-day3: 0;
	--star-opacity-day4: 0.2;
	--star-opacity-day5: 0.3;	
	--star-opacity-day6: 0.4;
	--star-opacity-day7: 0.5;
	--star-opacity-day8: 0.5;
	--star-opacity-day9: 0.6;
	--star-opacity-day10: 0.7;
}

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

.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;
	}
}