:root {
	--base-color: 0, 0, 0;
	--accent-color: 0, 0, 0;
	--accent-tint: 0, 0, 0;
	--letter: ' ';
	--welcome-scale: 100%;
}

html,
body {
	height: 100%;
	margin: 0;
	background-color: rgb(0, 0, 0);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#content,
#wrapper,
#welcome {
	width: 100%;
	height: 100%;
}

#content {
	background-color: rgb(0, 0, 0);
	height: 100vh;
}

#wrapper,
#welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#welcome {
	width: fit-content;
}

#name,
#welcome-to,
#coming-soon {
	display: block;
	position: relative;
	background-color: transparent;
	color: rgb(255, 255, 255);

}

#welcome-to,
#coming-soon {
	font-family: 'Yellowtail';
	font-size: 6vw;
}

html[unloaded] .text {
	opacity: 0;
}

#welcome-to {
	--accent-color: 0, 0, 255;
	--accent-tint: 0, 0, 139;
	margin-right: auto;
	transform: translateY(65px) rotateZ(-9deg);
	transition: opacity 0.5s ease-in-out;
}

#name {
	--accent-color: 255, 0, 0;
	--accent-tint: var(--accent-color);
	position: relative;
	font-family: 'Anton', sans-serif;
	font-size: 15vw;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	transform: perspective(500px) rotatex(15deg);
	transform-style: preserve-3d;
	transition: opacity 0.9s ease-in-out;
}

#coming-soon {
	--accent-color: 255, 255, 0;
	--accent-tint: 255, 165, 0;
	margin-left: auto;
	transform: translateY(-75px) rotateZ(-9deg);
	transition: opacity 1.3s ease-in-out;
}

#name span.letter::before,
#name span.letter::after {
	position: absolute;
	content: var(--letter);
	clip-path: polygon(7% 20%, 200% 20%, 171% 104%, 50% 61%);
}

#name span.letter::after {
	clip-path: none;
	text-shadow: none;
}

#name span,
#welcome-to span,
#coming-soon span {
	display: inline-flex;
}

#name span {
	margin-right: 15px;
	margin-bottom: 15px;
}

/* Optional: Adjust animation delay for a more pronounced wave effect */
#name span {
	transform: translateY(calc(70px - var(--index, 0) * 18px - pow(var(--index, 0), 2) * 1.2px + pow(var(--index, 0), 3) * 0.12px));
}

/* Optional: Adjust animation delay for a more pronounced wave effect */
#welcome-to span {
	transform: translateY(calc(var(--index, 0) * -1px + pow(var(--index, 0), 2) * -0.1px));
}

/* Optional: Adjust animation delay for a more pronounced wave effect */
#coming-soon span {
	transform: translateY(calc(var(--index, 0) * -3px + pow(var(--index, 0), 2) * 0.3px));
}

/* Styles for devices with a viewport width of 768px or less (commonly mobile devices) */
@media only screen and (min-width: 768px) {
	:root {
		--welcome-scale: 95%;
	}
}

@media only screen and (max-width: 768px) {
	:root {
		--welcome-scale: 90%;
	}
	
	html[unloaded] #content {
		height: 100%;
	}

	html[unloaded] #name span.letter::before,
	html[unloaded] #name span.letter::after {
		clip-path: polygon(7% 20%, 200% 20%, 200% 115%, 50% 70%);
	}

	#content {
		height: 100%;
	}

	#name span.letter::before,
	#name span.letter::after {
		clip-path: polygon(7% 20%, 200% 20%, 200% 115%, 50% 70%);
	}
}

@media only screen and (max-width: 500px) {
	:root {
		--welcome-scale: 80%;
	}
}

@media only screen and (max-width: 415px) {
	:root {
		--welcome-scale: 70%;
	}

}

@media only screen and (max-width: 360px) {
	:root {
		--welcome-scale: 50%;
	}
}

@media only screen and (max-width: 300px) {
	:root {
		--welcome-scale: 40%;
	}
}

html[unloaded] #welcome,
#welcome {
	transform: scale(var(--welcome-scale));
}