@import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Fruktur', cursive;
}
section {
	position: absolute;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0b061f;
}
.spider {
	position: absolute;
	top: 0;
	animation: animateSpider 15s ease-in-out infinite;
}
@keyframes animateSpider {
	0%,100% {
		transform: translateY(-500px);
	}
	50% {
		transform: translateY(-350px);
	}
}
.pumpkin01 {
	position: absolute;
	top: 100px;
	right: 200px;
	animation: animatePumpkin 8s ease-in-out infinite;
}
.pumpkin02 {
	position: absolute;
	bottom: 20px;
	left: 50px;
	scale: 0.5;
	animation: animatePumpkin 4s ease-in-out infinite;
}
@keyframes animatePumpkin {
	0%,100% 
	{
		transform: translateY(-50px);
	}
	50% 
	{
		transform: translateY(50px);
	}
}
.spiderWeb {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
}
h2 {
	position: relative;
    font-size: 12vw;
	font-weight: 100;
	display: flex;
    color: #0e3742;
    text-shadow: none;
    animation: animate 5s infinite linear;
}
 
@keyframes animate {
    0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% {
			color: rgba(255, 255, 255, 0.1);
			text-shadow: none;
    }
    18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100% {
			color: #ffac09;
			text-shadow: 0 0 10px #ffac09,
										0 0 20px #ffac09,
										0 0 40px #ffac09,
										0 0 80px #ffac09,
										0 0 160px #ffac09;
    }
}
a {
	text-decoration: none;
	color: aliceblue;
}
button {
	position: absolute;
	margin-top: 300px;
	padding: 10px;
	background: #0b061f;
	font-size: 16px;
}
button:hover {
	background: #ffac09;
}