/*
	**********************
	** Header - Desktop ** 
	**********************
*/

header #headerImg { width: 100vw; height: auto; }

header nav {
	width:  100vw;

	display:  flex;
	justify-content: space-between;
	align-items: center;

	padding-top: 1%;
	padding-left: 2%;
	padding-right: 2%;

	position: absolute;
	top: 8px;
  left: 16px;

  color: var(--color-2);
}

header nav #vanHackProfile {
	cursor: pointer;
	margin-top: 0.50em;
	transition: all 0.3s ease;
}

header nav #vanHackProfile:hover {
	transform: translateY(-5px);
	filter: brightness(87%);
}

header nav #desktopMenu { display: flex; justify-content: center; }

header nav #desktopMenu > li {
	margin-right: 50px;
	cursor:  pointer;

  border-bottom-style: dashed;
  border-bottom-width: 3.1px;

  transition: all 0.3s ease;
}

header nav #desktopMenu > li:hover {
	-webkit-filter: brightness(87%);
	border-bottom-style: solid;
}

header nav #sponsorThemeBtn a #sponsorBtn, header nav #sponsorThemeBtn a #stripeBtn, header nav #sponsorThemeBtn #themeBtn {
	height: 35px;
	border:  0;
	border-radius: 5px;
	cursor: pointer;
	transition: -webkit-filter 0.3s ease;
}

header nav #sponsorThemeBtn a #sponsorBtn, header nav #sponsorThemeBtn a #stripeBtn { width: 116px; }
header nav #sponsorThemeBtn #themeBtn { width: 50px; }

header nav #sponsorThemeBtn a #sponsorBtn:hover,
header nav #sponsorThemeBtn a #stripeBtn:hover,
header nav #sponsorThemeBtn #themeBtn:hover
{ -webkit-filter: brightness(80%); }

#titleAndSubtitle {
	width: 100vw;
	position: absolute;
	top: 100px;

	color: var(--color-3);
	font-weight: bold;
	text-align: center;

	text-shadow: 2px 2px var(--text-shadow-color);
}

#titleAndSubtitle span { font-size: 20px; }

/*
	*********************
	** Header - Mobile ** 
	*********************
*/

#mobileMenuToggle {
	width: auto;
	background-color:  rgba(0,255,255,0.2);

  display: none;
  position: absolute;
  top: 15px;
  right: 15px;

  border-radius:  5px;
  padding:  5px;
  cursor: pointer;
  z-index:  999;
}

#bar1, #bar2, #bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--color-2);
  margin: 6px 0;
  transition: 0.4s;
}

.change #bar1 { transform: translate(0, 11px) rotate(-45deg); }
.change #bar2 {opacity: 0;}
.change #bar3 { transform: translate(0, -11px) rotate(45deg); }

#mobileMenu {
	width:  auto;

	display: none;
	position:  absolute;

	top: 75px;
  right: -150px;

  background-color: var(--background-color-1);
  color:  var(--color-1);
  border-radius: 5px;

  transition: all 0.7s ease;
  z-index:  999;
}

#mobileMenu li {
	padding: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
}

#mobileMenu a { color: var(--color-1); }

#mobileMenu li:hover { background-color: var(--background-color-4); color: var(--color-2); }

/*
	**************************
	** Screen - Controllers ** 
	**************************
*/

@media only screen and (max-width: 850px) {
  header nav #sponsorThemeBtn,
  header nav #desktopMenu
  { display:  none; }

  #mobileMenuToggle { display: inline-block; }
  #mobileMenu { display: inline-block; }
}

@media only screen and (max-width: 625px) {
	header nav #vanHackProfile { display: none; }
	#titleAndSubtitle { display: none; }
  #headerImg { content:url("../../images/header-mobile.avif"); }
}