html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

body {
	background-color: black;
	background-image: url('006.png');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.square-001 {
	position: absolute;
	top: 80vh;
	left: auto;
	width: 100vw;
	height: 0.2vh;
	background-color: rgba(0, 0, 0, 0.1);
	filter: blur(0vh);
	z-index: -1;
	pointer-events: none;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1);
}

.square-001-anim,
.square-002,
.square-003,
.square-004 {
	position: absolute;
	top: 80vh;
	left: auto;
	opacity: 0;
}

.square-001-anim.active {
	opacity: 1;
	animation: square-animation-001 0.5s forwards;
	--anim-color: rgba(41, 234, 255, 0.5);
	--anim-blur: 0vh;
}

.square-001-anim.inverse {
	opacity: 1;
	animation: square-animation-inverse-001 1s forwards;
	--anim-color: rgba(41, 234, 255, 0.5);
	--anim-blur: 0vh;
}

@keyframes square-animation-001 {
	0% {
		left: -5vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}

	100% {
		left: -5vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}
}

@keyframes square-animation-inverse-001 {
	0% {
		left: -5vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}

	100% {
		left: -5vw;
		transform: translateY(80vh);
		width: 30vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}
}

.square-002.active {
	opacity: 1;
	animation: square-animation-002 0.5s forwards;
	--anim-color: rgba(255, 0, 0, 0.5);
	--anim-blur: 0vh;
}

.square-002.inverse {
	opacity: 1;
	animation: square-animation-inverse-002 1s forwards;
	--anim-color: rgba(255, 0, 0, 0.5);
	--anim-blur: 0vh;
}

@keyframes square-animation-002 {
	0% {
		left: 25vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}

	100% {
		left: 25vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}
}

@keyframes square-animation-inverse-002 {
	0% {
		left: 25vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}

	100% {
		left: 25vw;
		transform: translateY(80vh);
		width: 25vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}
}

.square-003.active {
	opacity: 1;
	animation: square-animation-003 0.5s forwards;
	--anim-color: rgba(255, 255, 0, 0.5);
	/* Yellow */
	--anim-blur: 0vh;
}

.square-003.inverse {
	opacity: 1;
	animation: square-animation-inverse-003 1s forwards;
	--anim-color: rgba(255, 255, 0, 0.5);
	--anim-blur: 0vh;
}

@keyframes square-animation-003 {
	0% {
		left: 50vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}

	100% {
		left: 50vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}
}

@keyframes square-animation-inverse-003 {
	0% {
		left: 50vw;
		transform: translateY(-80vh);
		width: 25vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}

	100% {
		left: 50vw;
		transform: translateY(80vh);
		width: 25vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}
}

.square-004.active {
	opacity: 1;
	animation: square-animation-004 0.5s forwards;
	--anim-color: rgba(0, 255, 0, 0.5);
	/* Green */
	--anim-blur: 0vh;
}

.square-004.inverse {
	opacity: 1;
	animation: square-animation-inverse-004 1s forwards;
	--anim-color: rgba(0, 255, 0, 0.5);
	--anim-blur: 0vh;
}

@keyframes square-animation-004 {
	0% {
		left: 75vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}

	100% {
		left: 75vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}
}

@keyframes square-animation-inverse-004 {
	0% {
		left: 75vw;
		transform: translateY(-80vh);
		width: 30vw;
		height: 100vh;
		background-color: var(--anim-color);
		filter: blur(var(--anim-blur, 0vh));
	}

	100% {
		left: 75vw;
		transform: translateY(80vh);
		width: 30vw;
		height: 0.2vh;
		background-color: rgba(0, 0, 0, 0);
		filter: blur(0vh);
	}
}




.tuxter {

	user-select: none;
	filter: none;
	font-size: 8vw;
	font-family: 'Avenir', sans-serif;
	color: rgba(255, 255, 255, 1);
	letter-spacing: 4vw;
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.5s ease-in-out;
	transform: translate(2vw, -40vh);
}

.tuxter:hover {
	filter: blur(0vw);
	font-size: 8vw;
	color: rgba(255, 255, 255, 1);
	letter-spacing: 6vw;
	transform: translate(3vw, -40vh);
}

.menuxter {
	position: fixed;
	top: 85vh;
	left: 1vw;
	width: 100vw;
	display: flex;
	justify-content: space-evenly;
	z-index: 1;
}

.toxt {
	cursor: pointer;
	user-select: none;
	filter: none;
	font-family: 'Travel', sans-serif;
	font-size: 6vw;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 1vw;
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
}

.toxt:hover {
	font-size: 6vw;
	color: rgba(255, 255, 255, 1);
	letter-spacing: 1vw;
}


@font-face {
	font-family: 'Avenir';
	src: url('Avenir.woff') format('woff'),
		url('Avenir.woff2') format('woff2');
}

@font-face {
	font-family: 'Travel';
	src: url('Travel.woff') format('woff');
}