html{
	scroll-behavior: smooth;
}

body{
	background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
	overflow: hidden;
}

header{
	height: 100vh;
	background-image: url(../img/background.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}

#header-block{
	position: relative;
	padding-top: 35vh;
	text-align: center;
}

#header-block-group{
	background-color: rgba(255, 255, 255, 0.5);
}

#header-block-text{
	text-transform: uppercase;
	background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Work Sans', sans-serif;
	font-size: 20vh;
	color: grad;
}

#event{
	position: absolute;
	height: 100vh;
	width: 100vw;
}

.snow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.snow__layer {
	position: absolute;
	left: -100px;
	right: -100px;
	-webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
					animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
	-webkit-perspective: 100px;
					perspective: 100px;
	-webkit-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
					transform: translateX(-50px);
}

.snow__fall {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2000px;
	background: url(../img/snow-light.png);
	-webkit-animation: fall 10s linear infinite;
					animation: fall 10s linear infinite;
}

.snow__layer:nth-child(1) {
	-webkit-animation-duration: 35s;
					animation-duration: 35s;
}

.snow__layer:nth-child(1) .snow__fall {
	background: url(../img/snow-blur.png);
	-webkit-transform: translateZ(25px);
					transform: translateZ(25px);
	-webkit-animation-name: fallblur;
					animation-name: fallblur;
	width: 4000px;
	left: -2000px;
}

.snow__layer:nth-child(2) {
	-webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
					animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.snow__layer:nth-child(2) .snow__fall {
	background: url(../img/snow-medium.png);
	-webkit-animation-duration: 25s;
					animation-duration: 25s;
}

.snow__fall:nth-child(3) {
	-webkit-animation-duration: 10s;
					animation-duration: 10s;
	background-size: 250px;
}

.snow__fall:nth-child(2) {
	-webkit-animation-duration: 20s;
					animation-duration: 20s;
	background-size: 500px;
}

.snow__layer:nth-child(4) .snow__fall {
	-webkit-animation-duration: 5s;
					animation-duration: 5s;
	-webkit-transform: translateZ(50px);
					transform: translateZ(50px);
	-webkit-animation-name: falllight;
					animation-name: falllight;
}

@-webkit-keyframes fall {
	from {
		-webkit-transform: translateY(-1000px);
						transform: translateY(-1000px);
	}
}

@keyframes fall {
	from {
		-webkit-transform: translateY(-1000px);
						transform: translateY(-1000px);
	}
}

@-webkit-keyframes falllight {
	from {
		-webkit-transform: translateY(-1000px) translateZ(50px);
						transform: translateY(-1000px) translateZ(50px);
	}
}

@keyframes falllight {
	from {
		-webkit-transform: translateY(-1000px) translateZ(50px);
						transform: translateY(-1000px) translateZ(50px);
	}
}

@-webkit-keyframes fallblur {
	from {
		-webkit-transform: translateY(-1000px) translateZ(25px);
						transform: translateY(-1000px) translateZ(25px);
	}
}

@keyframes fallblur {
	from {
		-webkit-transform: translateY(-1000px) translateZ(25px);
						transform: translateY(-1000px) translateZ(25px);
	}
}

@-webkit-keyframes wind {
	to {
		-webkit-transform: translateX(50px);
						transform: translateX(50px);
	}
}

@keyframes wind {
	to {
		-webkit-transform: translateX(50px);
						transform: translateX(50px);
	}
}