$tiny: .2rem;
$small: .5rem;
$regular-less: .9rem;
$regular: 1.1rem;
$regular-more: 1.3rem;
$regular-more-em: 1.3em;
$big: 1.6rem;
$bigger: 1.8rem;
$twice: 2.2rem;
$height: 3.1rem;
$mastodon: 4.4rem;
$radius-s: .4rem;
$radius-m: .6rem;
$radius-l: 1rem;
$trans: .5s;
$quicktrans: .2s;

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

#home {
	position: fixed;
	top: 2vw;
	left: 2vw;
	padding: 0 $regular-less;
	line-height: 2.8rem; 
	font-size: $big;
	background: var(--primary);
	box-shadow: var(--shadow);
	transform: rotate(-2deg);
	color: var(--background);
	&:hover,
	&:focus {
		transform: rotate(3deg);
	}
	a {
		color: var(--background);
		&:hover,
		&:focus {
			color: white;
		}
	}
	&:hover,
	&:focus {
		background: var(--secondary);
		border-bottom: none;
	}
}

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

.lang-list {
	display: none;
	top: 5rem;
	right: -100px;
	position: absolute;
	box-shadow: var(--shadow);
}

/* Mobile nav */
.nav-mobile {
	display: none;
	height: $height;
	width: $height;
	position: fixed;
	top: 3vh;
	right: 3vh;
	box-shadow: var(--shadow);
	background: var(--background);
	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: $radius-s !important;
 		transition: $quicktrans;
	}
	span::before {
		top: .65rem;
	}
	span::after {
		bottom: .65rem;
	}
}

#langtoggle:checked + .lang-list {
	display: block;
	right: 3vh;
}

@media only screen and (max-width: 950px) {
	#home {
		top: 3vh;
		left: 2vh;
	}
	.nav {
		margin: 3vh;
	}
	.nav-mobile {
		display: block;
	}
	.nav-list {
		position: fixed;
		min-width: 50vw;
		top: 5rem;
		right: -240px;
		background: var(--background);
		box-shadow: var(--shadow);
		transition: .5s;
		z-index: 9;
	}
	nav ul li {
		float: none;
		background: var(--background)
	}
	#langtoggle:checked + .lang-list {
		right: 3vw;
	}
}

#menutoggle:checked {
	& + .nav-list {
		right: 3vh;
		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);
		}
	}
}