nav {
	height: 75px;
	width: 100vw;
	background-color: var(--color-1);

	position: relative;

	background-image: url("/src/images/basics/squiggle_1.png");
	background-position: 0% 45%;
	background-size: 1000px;
	background-repeat: repeat;

	z-index: 10;
}

nav .logo {
	height: 75px;
	margin-left: 5px;

	display: inline-block;
}

nav div {
	position: absolute;
	bottom: 2px;
	left: 35vw;

	width: 30vw;
	min-width: fit-content;

	display: flex;
	justify-content: space-between;
}

nav div a {
	display: block;
	text-align: center;

	text-decoration: none;
	color: var(--color-7);

	font-size: 32px;

	padding-left: 5px;
	padding-right: 5px;

	width: 10vw;
	min-width: fit-content;
}

nav div a:hover {
	background-color: var(--color-5);
}

@media screen and (max-width: 700px) {
	nav {
		position: sticky;
		top: 0;
	}

	#links {
		background-color: var(--color-4);
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 75px;
		height: 100vh;
		width: 200px;
		right: -200px;
		align-items: center;
		text-align: center;
		justify-content: flex-start;
		transition: 0.5s;

		background-image: url("/src/images/basics/squiggle_1.png");
		background-position: 50% 45%;
		background-size: 1000px;
		background-repeat: repeat;
	}

	#links.active {
		right: 0;
	}

	.hamburger {
		height: 50px;
		width: 50px;
		top: 10px;

		margin-right: 25px;

		margin-left: auto;
		position: relative;

		float: right;
	}

	.hamburger span {
		height: 5px;
		width: 100%;

		background-color: var(--color-7);
		border-radius: 25px;

		position: absolute;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		transition: 0.5s;
	}

	.hamburger span:first-child {
		top: 25%;
	}

	.hamburger span:last-child {
		top: 75%;
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.hamburger.active span:first-child {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.hamburger.hamburger.active span:last-child {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	nav div {
		left: auto;
	}
}