/* +++++++++++++++++++++++++++++++++++++++++++ */
/* site-specific styles */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* variables */
:root{
  --accent: #388841;
  --dark: #222222;
}

/* layout */
main{
  width:100vw;
  overflow-x:hidden;
}

/* header */
header{
  position:fixed;
  z-index:99;
  top:0;
  width:100%;
  /* background-color:#222222; */
  transition:.3s;
}
.header-content{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:30px 40px;
  transition: padding .2s;
  position:relative;
}
.header-logo{
  height:35px;
  background-image:url('/img/branding/pixel-planet-today-white-lettering.png');
  width:150px;
  transition: height .2s;
}
nav{
  background-color:var(--dark);
}
nav a{
  padding:7px 13px;
  font-size: 14px;
  font-family: var(--primary-font);
  transform:scale(1);
	position:relative;
	display:inline-block;
  letter-spacing: normal;
	transition:.25s;
}
nav a:after{
	/* nothing at first */
}
nav a:hover:after{
  content:"";
	position:absolute;
	left:0;
  bottom:0;
	width:100%;
	height:3px;
	background-color:currentColor;
  pointer-events: none;
	animation:hoverLink .55s;
}
nav a:active{
	transform:scale(.95);
}
nav a.selected{
  background-color:white;
  color:#333333;
}
nav a.selected:after{
  opacity:0;
}

/* after-scrolling header styles */
header.scrolled{
  background-color:var(--dark);
}
header.scrolled .header-content{
  padding:8px 40px;
}
@media only screen and (max-width:615px){
  header.scrolled .header-content{
    padding:16px 40px;
  }
}
header.scrolled .header-logo{
  height:28px;
}

/* mobile hamburger menu styles */
.mobile-menu-icon{
  display: inline-block;
  background-image:url("/img/pixel/ui/hamburger-menu-icon.png");
  width:24px;
  height:24px;
}

/* responsive */
@media only screen and (max-width:615px){
  nav{
    flex-wrap:wrap;
  }
  nav a{
    flex:auto;
    width:100%;
  }
  /* when shown */
  header.menu-open{
    background-color:var(--dark);
  }
  header.menu-open nav{
    position:absolute;
    display:flex!important;
    top:100%;
    left:0;
    width:100%;
  }
}


/* other elements */
/* overwrite shared */
.strikethru{
  text-decoration-thickness: 0.14em;
}

.footer-logo{
  background-image:url('/img/branding/pixel-planet-today-white-lettering.png');
  width:150px;
}