.nav {
	height: 2.8rem;
	margin: 2vw;
	text-transform: uppercase;
	font-weight: 700;
	* {
		border-radius: var(--radius-m);
		list-style-type: none;
	}
	/* activate the following if you choose to make the header fixed */
	/*z-index: 9;
	position: fixed;
	top: 2vw;
	right: 2vw
	background: var(--background); */
}

#home {
	padding: 0 var(--regular);
	float: left;
	line-height: 2.8rem; 
	font-size: var(--big);
	background: var(--primary);
	box-shadow: var(--shadow);
	a {
		color: var(--background);
		&:hover,
		&:focus {
			color: white;
		}
	}
	&:hover,
	&:focus {
		background: var(--secondary);
		border-bottom: none;
	}
}

nav {
	float: right;
	text-align: right;
	padding: 0 var(--small);
	box-shadow: var(--shadow);
	svg {
		width: var(--bigger);
		margin: var(--small);
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			float: left;
			margin: 0;
			a {
				display: block;
				color: var(--text) !important;
				font-weight: 700;
				line-height: 2.8rem;
				height: 2.8rem;
				padding: 0 var(--small);
				font-size: var(--regular-more);
				&:hover,
				&:focus{
					text-shadow: var(--text-shadow);
				}
				&:active {
					opacity: .6;
				}
				&::before {
					content: none !important;
				}
			}
		}
		ul {
			list-style: none;
		}
	}
}

.dropdown-content {
	display: none;
	position: absolute;
	margin-top: var(--small);
	background: var(--background);
	overflow: scroll;
	box-shadow: var(--shadow);
}

/* Mobile nav */
.nav-mobile {
	display: none;
	height: 2.8rem;
	width: 2.8rem;
	position: absolute;
	top: 2vw;
	right: 2vw;
	background: var(--background);
	box-shadow: var(--shadow);
	span {
		top: 1.25rem;
		left: .6rem;
	}
	span,
	span::before,
	span::after {
		height: 4px;
		width: 26px;
		background: var(--text);
		position: absolute;
		display: block;
		content: "";
		box-shadow: var(--little-shadow);
		border-radius: var(--radius-s) !important;
 		transition: var(--quicktrans);
	}
	span::before {
		top: .65rem;
	}
	span::after {
		bottom: .65rem;
	}
}

@media only screen and (max-width: 950px) {
	.nav-mobile {
		display: block;
	}
	.nav-list {
		position: fixed;
		top: var(--mastodon);
		right: -500px;
		background: var(--background);
		box-shadow: var(--shadow);
		transition: .5s;
	}
	nav ul li {
		float: none;
	}
}

.open-menu {
	.nav-list {
		right: var(--small);
		transition: .5s;
	}
	 .nav-mobile span {
		background: transparent;
		box-shadow: none;
		&::before,
		&::after {
			top: 0;
			box-shadow: none;
		}
		&::before {
			transform: rotate(45deg);
		}
		&::after {
			transform: rotate(-45deg);
		}
	}
}

.dropdown.open-menu {
	.dropdown-content {
		display: block;
	}
}