#index {
	height: 100%;
	padding: 0 40px;
	article {
		height: 100%;
		padding:0;
	}
	section {
		height:100%;
		align-content: center;
	}
	h1, h2 span, p {
		transform: scale(0.74);
		display: inline-block;
		opacity: 0;
		filter: blur(4px);
	}
	h1 {
		margin:0;
		padding-top:0;
		font-size: clamp(1rem, 18vw, 18rem);
		display:block;
		text-align: center;
		animation: fade-in 0.3s 0s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
	}
	h2 {
		font-size: clamp(1rem, 12vw, 250px);
		text-align: center;
		padding:0 0 50px;
		span:nth-child(1) {
			animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
		}
		span:nth-child(2) {
			animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.7s forwards cubic-bezier(0.5, 1, 0.89, 1);
		}
		span:nth-child(3) {
			animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.9s forwards cubic-bezier(0.5, 1, 0.89, 1);
		}
	}
	p {
		animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 1.1s forwards cubic-bezier(0.5, 1, 0.89, 1);
		flex-grow:1;
		text-align: center;
		padding-bottom: 50px;
		font-family: 'Josefin Slab', cursive;
		font-size: clamp(1.5em, 5vw, 2.5rem);
		letter-spacing: normal;
	}
	nav {
		position: relative;
		height: 100%;
		padding: 20px 0;
		ul {
			display:flex;
			height: 100%;
			flex-direction: column;
			gap: 10px;
			padding: 0;
			list-style: none;
			font-size: 0;
			li {
				opacity: 0;
				flex:1;
				letter-spacing: normal;
				&.visible {
					&:nth-child(1) {
						animation: fade-in 0.5s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.5s 0.1s forwards cubic-bezier(0.5, 1, 0.89, 1);
						a span {
							display: inline-block;
							animation: shake 5s 3s infinite;
						}
					}
					&:nth-child(2) {
						animation: fade-in 0.5s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.5s 0.2s forwards cubic-bezier(0.5, 1, 0.89, 1);
						a span {
							display: inline-block;
							animation: shake 5s 5s infinite;
						}
					}
					&:nth-child(3) {
						animation: fade-in 0.5s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.5s 0.3s forwards cubic-bezier(0.5, 1, 0.89, 1);
						a span {
							display: inline-block;
							animation: shake 5s 7s infinite;
						}
					}
					&:nth-child(4) {
						animation: fade-in 0.5s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.5s 0.4s forwards cubic-bezier(0.5, 1, 0.89, 1);
						a span {
							display: inline-block;
							animation: shake 5s 9s infinite;
						}
					}
					&:nth-child(5) {
						animation: fade-in 0.5s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
						a span {
							display: inline-block;
							animation: shake 5s 11s infinite;
						}
					}
				}
				a {
					align-content: center;
					font-family: 'Amatic SC', cursive;
					font-size: 3.6rem;
					color: var(--secondary-comp-color);
					text-decoration: none;
					display:inline-block;
					background: var(--complementary-color);
					border-radius: 20px;
					width: 100%;
					height: 100%;
					text-align: center;
				}
			}
		}
	}
	.scroll-down-link {
		position: absolute;
		z-index: 100;
		cursor:pointer;
		height: 60px;
		width: 80px;
		margin: 0px 0 0 -40px;
		line-height: 60px;
		left: 50%;
		bottom: 10px;
		color: var(--primary-color);
		text-align: center;
		font-size: 4.0rem;
		text-decoration: none;
		animation: fade_move_down 2s ease-in-out infinite;
	}
}
@keyframes shake {
    0% { transform: translateX(0); }
	10% { transform: translateX(3px); }
	20% { transform: translateX(-3px); }
	30% { transform: translateX(3px); }
	40% { transform: translateX(0); }
	100% { transform: translateX(0); }
}
@keyframes fade_move_down {
	0%   { transform:translate(0,-20px); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { transform:translate(0,20px); opacity: 0; }
}
@keyframes scale {
	100% {
		transform: scale(1);
	}
}
@keyframes fade-in {
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@media screen and (min-width: 940px) {
	#index {
		padding: 20px 40px;
		article {
			display: flex;
			flex-direction: column;
		}
		nav {
			height: auto;
			/* padding: 0; */
			ul {
				height: auto;
				flex-direction: row;
				li {
					&.visible {
						&:nth-child(1) {
							animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.5s forwards cubic-bezier(0.5, 1, 0.89, 1);
							a span {
								display: inline-block;
								animation: shake 5s 3s infinite;
							}
						}
						&:nth-child(2) {
							animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.7s forwards cubic-bezier(0.5, 1, 0.89, 1);
							a span {
								display: inline-block;
								animation: shake 5s 5s infinite;
							}
						}
						&:nth-child(3) {
							animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 0.9s forwards cubic-bezier(0.5, 1, 0.89, 1);
							a span {
								display: inline-block;
								animation: shake 5s 7s infinite;
							}
						}
						&:nth-child(4) {
							animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 1.1s forwards cubic-bezier(0.5, 1, 0.89, 1);
							a span {
								display: inline-block;
								animation: shake 5s 9s infinite;
							}
						}
						&:nth-child(5) {
							animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0), scale 0.8s 1.3s forwards cubic-bezier(0.5, 1, 0.89, 1);
							a span {
								display: inline-block;
								animation: shake 5s 11s infinite;
							}
						}
					}
					flex: 1;
					a{
						height: 200px;
						transition: all .3s;
						&:hover {
							background: var(--secondary-color)
						}
					}
				}
			}
		}
		p {
			width: 100%;
			padding: 0 160px;
		}
		.scroll-down-link{
			display: none;
		}
	}
}