.christmas-lights li {
	--christmas-lights-1: rgb(85, 235, 85);
	--christmas-lights-2: rgb(235, 45, 45);
	--christmas-lights-3: rgb(245, 215, 45);
	animation-duration: 1.8s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-name: flash-1;
	border-radius: 50%;
	display: inline-block;
	height: 12px;
	width: 12px;
	margin: 25px 20px;
	position: relative;
}

.christmas-lights {
	left: 0;
	margin: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: -15px;
	white-space: nowrap;
	width: 100%;
	z-index: 100;
}

.christmas-lights[data-position="bottom"] {
	top: auto;
	bottom: -12px;
	transform: scale(-1)
}

.christmas-lights[data-position="right"],
.christmas-lights[data-position="left"] {
	transform: rotate(-90deg);
	left: -15px;
	top: 0;
	right: auto;
	bottom: 0;
	width: 100vh;
}

.christmas-lights[data-position="right"] {
	transform: rotate(90deg);
	left: auto;
	right: -15px;
}

.christmas-lights li:before {
	content: "";
	position: absolute;
	background: grey;
	width: 8px;
	height: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	top: -10px;
	left: 3px;
}

.christmas-lights li:after {
	content: "";
	top: -25px;
	left: 10px;
	position: absolute;
	width: 50px;
	height: 20px;
	border-bottom: solid grey 2px;
	border-radius: 50%;
}

.christmas-lights li:last-child:after {
	content: none;
}

.christmas-lights li:first-child {
	margin-left: -20px;
}

.christmas-lights li:nth-child(2n+1) {
	background: var(--christmas-lights-1);
	box-shadow: 0px 5px 20px 3px rgb(245 215 130);
	animation-name: flash-2;
	animation-duration: 0.5s;
}

.christmas-lights li:nth-child(4n+2) {
	background: var(--christmas-lights-2);
	box-shadow: 0px 5px 20px 3px var(--christmas-lights-2);
	animation-name: flash-3;
	animation-duration: 1.1s;
}

.christmas-lights li:nth-child(odd) {
	animation-duration: 1.8s;
}

.christmas-lights li:nth-child(3n+1) {
	animation-duration: 1.4s;
}

@keyframes flash-1 {
	0%, 100% {
		background: var(--christmas-lights-1);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-1);
	}

	50% {
		background: var(--christmas-lights-2);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-2);
	}
}

@keyframes flash-2 {
	0%, 100% {
		background: var(--christmas-lights-2);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-2);
	}

	50% {
		background: var(--christmas-lights-3);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-3);
	}
}

@keyframes flash-3 {
	0%, 100% {
		background: var(--christmas-lights-3);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-3);
	}

	50% {
		background: var(--christmas-lights-1);
		box-shadow: 0px 5px 24px 3px var(--christmas-lights-1);
	}
}

@media (max-width: 1024px) {
	.christmas-lights[data-position="left"] {
		left: -14px;
	}

	.christmas-lights[data-position="right"] {
		right: -14px;
	}

	.christmas-lights[data-position="left"],
	.christmas-lights[data-position="right"] {
		height: 100vh;
	}
}

.deer-container {
	position: absolute;
	top: -95px;
	right: 12%;
}

.deer-runner {
	width: 225px;
	filter: contrast(1.28);
	animation: deerrunning 5s linear infinite;
}

@keyframes deerrunning {
	0% {
		transform: translateX(80%);
	}

	100% {
		transform: translateX(-80%);
	}
}