.nav {
	display: flex;
	background-color: var(--black1);
	height: 4rem;
	position: relative;
	z-index: 10;
	box-shadow: var(--shadow0);
}
.link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	padding: 0 2rem;
	height: auto;
	user-select: none;
	&:hover {
		background: var(--backdrop);
		color: var(--color);
	}
}
.profile {
	margin-left: auto;
	background: var(--color);
	color: var(--backdrop);
}
.logo {
	padding: 0 1rem;
	transition-duration: 100ms;
	user-select: none;
	&:hover {
		background: var(--backdrop);
		cursor: pointer;
	}
	&:active {
		transform: scale(1.1);
	}
}

.dropdown {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
	padding: 0 2rem;
	height: auto;
	user-select: none;
	position: relative;
	&:hover {
		background: var(--backdrop);
		color: var(--color);
	}
	.innerdropdown {
		display: none;
		position: absolute;
		top: 3rem;
		left: 0;
		z-index: 100;
		min-width: 16rem;
		background: var(--black1);
		.link {
			padding: 1rem 2rem;
		}
	}
	&:hover,
	&:focus-within {
		.innerdropdown {
			display: block;
		}
	}
}

.mobile {
	display: none;
}

@media screen and (max-width: 800px) {
	.nav {
		height: 3rem;
	}
	.desktop {
		display: none;
	}
	.mobile {
		display: inherit;
	}
}

/* FOR TESTING MOBILE NAV WITHOUT DEVTOOLS */
// .desktop {
// 	display: none;
// }
// .mobile {
// 	display: inherit;
// }