/* CSS Reset */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style-type: none;
}

/* Global Styles */

@keyframes ColorCycle {
	0% {background-position: 0% 0%;}
	50% {background-position: 100% 100%;}
	100% {background-position: 0% 0%;}
}

@font-face {
	font-family: "Lemon Jelly";
	src: url("../assets/fonts/lemon_jelly.ttf");
}

@font-face {
	font-family: "Aclonica";
	src: url("../assets/fonts/aclonica.ttf");
}

/* Navigation */

header {
	width: 100vw;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1;	
	user-select: none;
}

#expand-menu {
	display: none;
	background: transparent;
	outline: none;
	border: none;
	cursor: pointer;
	margin: 20px; 
	padding: 7.5px 6.5px;
	position: absolute;
}

.expand-menu-button {
	width: 35px;
	height: 5px;
	background: black;
	margin-bottom: 7.5px;
	border-radius: 2.5px;
}

.expand-menu-button:last-child {
	margin-bottom: 0px;
}

#nav-list {
	text-align: center;
}

#nav-list li {
	display: inline-block;
	border: 5px transparent;
	border-style: solid none;
}

#nav-list li:hover {
	background: rgba(0,0,0,0.1);
	border-bottom: 5px solid black;
}

#nav-list a {
	font-family: "Aclonica";
	font-size: 20px;
	color: black;
	font-weight: bold;
	letter-spacing: 1.35px;
	padding: 20px 30px;
	display: block;
}

/* Landing Page */

#landing {
	width: 100vw;
	height: 100vh;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;	
	background: linear-gradient(135deg, #d9abff, #abe4ff, #ddffab, #ffdaab, #ffabab);
	background-size: 400% 400%;
	animation: ColorCycle 90s linear infinite;
	overflow: hidden;
}

#title-container {
	position: relative;
}

#title-container::before {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 100%;
	transform: skew(-30deg);
	border-radius: 40px;
	box-shadow: 17.5px 10px rgba(0,0,0,0.1);
}

#title {
	margin: 0px 65px 20px;
	text-align: center;
	position: relative;
	user-select: none;
}

#title * {
	font-family: "Lemon Jelly";
	font-weight: lighter;
}

#title-name {
	font-size: 125px;
	letter-spacing: 4px;
}

#title h2 {
	font-size: 50px;
	letter-spacing: 2px;
	margin-top: -15px;
}

#title h2 span {
	display: inline-block;
	padding: 0px 20px;
}

/* Landing Page */


/* Media Queries */

@media (max-width: 976px) {

	#nav-list a {
		font-size: 16px;
	}

	#title-container::before {
		transform: skew(-15deg);
	}

	#title {
		margin: 0px 70px 20px;
	}

	#title-name {
		font-size: 100px;
	}

	#title h2 {
		visibility: hidden;
	}

	#title h2 span {
		visibility: visible;
		display: block;
		font-size: 50px;
	}

	#title h2 span:first-child {
		margin: 0px 0px -50px;
	}

	#title h2 span:last-child {
		margin: -50px 0px 0px;
	}

}

@media (max-width: 725px) { 

	#nav-list a {
		padding: 15px 25px;
	}

	#title-container::before {
		transform: skew(0deg, -20deg);
		box-shadow: 10px 15px rgba(0,0,0,0.1);
	}

	#title {
		margin: 100px 20px;
	}

	#title-name {
		font-size: 70px;
	}

	#title h2 {
		margin-top: 0;
	}

	#title h2 span {
		visibility: visible;
		display: block;
		font-size: 50px;
	}

	#title h2 span:first-child {
		margin: 0px 0px -60px;
	}

	#title h2 span:last-child {
		margin: -60px 0px 0px;
	}

}

@media (max-width: 460px) {

	nav {
		justify-content: unset; 
	}

	#expand-menu {
		display: block;
	}

	#expand-menu:focus + #nav-list {
		display: inline-block;
		width: 100%;
	}

	#nav-list {
		min-width: 100%;
		display: none;
	}

	#nav-list li {
		display: block;
	}

	#nav-list li:hover {
		border-bottom-color: transparent;
	}

	#nav-list a {
		text-align: center;
	}

	#title {
		margin: 100px 25px;
	}

	#title-name span {
		display: block;
		font-size: 85px;
	}

	#title-name span:last-child {
		margin-top: -25px;
		margin-bottom: 10px;
	}

	#title h2 span {
		visibility: visible;
		display: block;
		font-size: 40px;
	}

}

@media (max-width: 360px) {

	#title-name span {
		display: block;
		font-size: 75px;
	}

	#title-name span:last-child {
		margin-top: -25px;
		margin-bottom: 10px;
	}

}