/* Constants */
nav {
	--nav-height: 38px;
	--nav-text-color: #000;
	--nav-highlight-color: #fff;
	--nav-highlight-text-color: #000;
	--nav-background-color: var(--background);
	--nav-transition-time: 0.3s;
	--nav-item-height: calc(var(--nav-height) * 0.7);
	--nav-text-height: calc(var(--nav-item-height) * 0.78125);
	--nav-hamburger-thickness: 4px;
	--nav-hamburger-offset: calc(var(--nav-text-height) / 2 - var(--nav-hamburger-thickness) / 2);
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--nav-highlight-color: #ef5f00;
		--nav-text-color: #000;
		--nav-highlight-text-color: #3c3cff;
	}
} */

/* Static */
nav {
	z-index: 153;
	display: flex;
	flex-direction: column;
	height: auto;
	width: 100%;
	background-color: var(--nav-background-color);
	margin: 0;
	padding: 0;
}

.nav-header {
	display: flex;
	height: var(--nav-height);
	width: min(100%, 786px);
	align-items: center;
	margin: auto;
	justify-content: space-between;
}

/* This only exists to store state. */
nav input {
	display: none;
}

nav label {
	position: absolute;
	top: 0;
	left: 0;
  height: inherit;
  width: inherit;
  z-index: 154;
	margin: 0;	
  cursor: pointer;
}

.nav-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position:relative;
	height: calc(var(--nav-item-height) * 0.78125);
	width: calc(var(--nav-item-height) * 0.78125);
	margin-right: 8px;
	padding: 0;
	/* transform: translate(-100%, 0);
	left: 90%; */
	z-index: 150;
}

.nav-hamburger-line {
	display: block;
	height: 4px;
	width: 100%;
	margin: 0 auto;
	border-radius: 10px;
	background: black;
}

.nav-hamburger-line1 {
  transform-origin: 50% 50%;
  transition: transform var(--nav-transition-time) ease-in-out;
}

.nav-hamburger-line2 {
  transition: transform var(--nav-transition-time) ease-in-out;
}

.nav-hamburger-line3 {
  transform-origin: 50% 50%;
  transition: transform var(--nav-transition-time) ease-in-out;
}


.nav-link {
	color: var(--nav-text-color);
	padding: 4px 32px;
	text-decoration: none;
	height: var(--nav-height);
	/* line-height: var(--nav-height); */
	text-align: center;
	/* font-size: calc(var(--nav-height) * 0.4); */
	transition: var(--nav-transition-time);
	font-size: 1.5rem;
	font-style: bold;
	transform-origin: 50% 0%;
}

.nav-home {
	position: relative;
	margin-left: 8px;
	padding: auto;
	height: var(--nav-item-height);
}

nav img {
	position: relative;
	height: inherit;
}

/* Transitions */
nav a:active {
	background-color: #ff9900;
	color: white;
}

nav a:hover {
	background-color: var(--nav-highlight-color);
	color: var(--nav-highlight-text-color)
}

nav input[type="checkbox"]:checked ~ .nav-header .nav-hamburger .nav-hamburger-line1 {
  transform: translate(0, var(--nav-hamburger-offset)) rotate(45deg) ;
}

nav input[type="checkbox"]:checked ~ .nav-header .nav-hamburger .nav-hamburger-line2 {
  transform: scaleY(0);
}

nav input[type="checkbox"]:checked ~ .nav-header .nav-hamburger .nav-hamburger-line3 {
  transform: translate(0, calc(-1 * var(--nav-hamburger-offset))) rotate(-45deg);
}

.nav-links {
	z-index: 151;
	display: none;
}

nav input[type="checkbox"]:checked ~ .nav-links {
	display: flex;
	flex-direction: column;
	justify-content: center;
  text-align: center;
}