/* components/background/snow/index.wxss */
page {
	width: 100%;
	height: 100%;
	position: fixed;
}

.snowflakes {
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
	position: absolute;

	@keyframes snowflakeFall {
		from {
			transform: translateY(-10px) rotate(0);
		}
	
		to {
			transform: translateY(100vh) rotate(1800deg);
		}
	}

	.snowflake {
		width: 10px;
		height: 10px;
		display: block;
		position: absolute;
		animation: snowflakeFall linear infinite;

		&::before,
		&::after {
			content: '';
			position: absolute;
			background: var(--theme-brand-gao);
			opacity: .8;
		}
		
		&::before {
			top: 45%;
			left: 0;
			width: 100%;
			height: 10%;
		}
		
		&::after {
			left: 45%;
			width: 10%;
			height: 100%;
		}
	}
}