@layer desktop {

	main {
		position: relative;
	}

	.page-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.crystal-image {
		width: 350px;
		height: auto;
		position: absolute;
		transform: translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		opacity: var(--parallax-scale);
		animation: float 20s ease-in-out infinite;
	}

	#crystal-01 {
		top: 30%;
		left: 75%;
		animation-delay: 0.9s;
	}

	#crystal-02 {
		top: 28%;
		left: -6%;
		animation-delay: 3.7s;
	}

	#crystal-03 {
		top: 143%;
		left: 7%;
		animation-delay: 0.8s;
	}

	#crystal-04 {
		top: 58%;
		left: 50%;
		animation-delay: 0.3s;
	}

	#crystal-05 {
		top: 94%;
		left: 60%;
		animation-delay: 2.7s;
	}

	#crystal-06 {
		top: 12%;
		left: 0%;
		animation-delay: 1.4s;
	}

	#crystal-07 {
		top: 132%;
		left: 73%;
		animation-delay: 2.05s;
	}

	#crystal-09 {
		top: 65%;
		left: 90%;
		animation-delay: 1.6s;
	}

	#crystal-10 {
		top: 89%;
		left: 3%;
		animation-delay: 1.3s;
	}

	@keyframes float {
		0%,
		100% {
			transform: translateY(0px) rotate(0deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		25% {
			transform: translateY(calc(var(--parallax-scale) * 30px)) rotate(3deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		50% {
			transform: translateY(calc(var(--parallax-scale) * -20px)) rotate(-2deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		75% {
			transform: translateY(calc(var(--parallax-scale) * -30px)) rotate(0.5deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
	}

}