#navbar {
	position: fixed;
	width: 100vw;
	height: var(--menu-height);
	top: 0;
  left: 0;
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 2vw;
	padding: 10px 50px;
	transform: translateY(calc(-1*var(--menu-height)));
	
  color: var(--white);
  
  background-color: var(--green);
		
	pointer-events: auto;
	
	z-index: 1;
}

#navbar.scrolled {
  transform: translateY(0);
}

#navbar a {
  color: var(--white);
  text-decoration: none;
  margin: 0 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
}

.logo {
	flex: 1;
	width: 100%;
	height: auto;
}

.logo img {
	width: 100%;
	height: auto;
}

.menu {
	flex: 10;
  list-style: none;
  display: flex;
  gap: 1vw;
  padding: 0;
}

/* Animations */

@keyframes navIn {
  from { transform: translateY(calc(-1*var(--menu-height))); }
  to { transform: translateY(0); }
}

@keyframes navOut {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1*var(--menu-height))); }
}

.inital {
	display: none;
}

#navbar.scrolled {
	animation: navIn 0.5s ease-out 0s none;
}

#navbar:not(.initial):not(.scrolled) {
	animation: navOut 0.5s ease-out 0s none;
}

/* Media */

@media (max-width: 1200px) {
}

@media (max-width: 992px) and (orientation: landscape) {
	#navbar {
		display: none;
	}
}

@media (max-width: 768px) {
	#navbar {
		display: none;
	}
}

@media (max-width: 480px) {
	#navbar {
		display: none;
	}
}