html {

  
  /* nav BG & line items (Home ...) slide down from top & bounce together */
  --slide: height 500ms cubic-bezier(.62,.04,.3,1.8);
}

header {
  display: flex;       
  flex-flow: row wrap;
  justify-content: space-between; 
  transition: var(--slide); /* background slides down(up) & bounces when nav shown(hidden) */
}
header.nav-showing {
  height: var(--header-height) !important;
}

.xburger{
  z-index: 1;        /* only if JS disabled */
  position: fixed;   /* makes control sticky */
  height: var(--header-height);  /* defined in common-page-layout */
  width: 26px;
  left: 0;           /* anchor xburger to the left side of header */
  cursor: pointer;
}
.xburger:hover {
  transform: scale(1.2);
}
.xburger.nav-showing {
  z-index: 1;
}

.stroke1, .stroke2, .stroke3 {
  position: absolute;
  left: 25%; 
  top: 50%;
  width: 24px;
  height: 3px;
  background-color: blue;

  /* strokes twist from ☰ to 🗙 (and back) when nav shown(hidden) */
  transition: transform 400ms cubic-bezier(.84, .06, .52, 1.8);   
}
.stroke1 {
transform: translateY(-8px);
animation-delay: 100ms;
}
.stroke3 {
transform: translateY(8px);
animation-delay: 250ms;
}

.xburger.nav-showing .stroke1 {
transform: rotate(40deg);
}
.xburger.nav-showing .stroke3  {
transform: rotate(-40deg);
}
.xburger.nav-showing .stroke2  {
opacity: 0;
}

.logo{
  display: none;
  margin-left: 50px;
  margin-right: 3rem;
  margin-top: 4px;
  font-size: 1.125rem;
  font-family: Superclarendon, Georgia, serif;

  /* blue letters outlined in black */
  color: #00c0ff;
  -webkit-text-fill-color: var(--heading-logo-color);  
  -webkit-text-stroke-width: 1px;           /* -webkit works on chrome and safari */
  -webkit-text-stroke-color: black;       /* doesn't apply to firefox and edge */
   text-shadow: 5px 5px 6px gray;  
}
.logo.nav-showing {
  display: block;
}

.nav {
  text-align: left;
  width: 100%;
  flex: 1 1;                  /* including flex-basis causes LIs to display under BG. WTF? */
  height: 0px;                /* only if JS disabled */
  overflow: hidden;           /* don't let li's overflow nav when nav height is set to 0 (to hide it) */
  transition: var(--slide);   /* line items slide down(up) when nav shown(hidden) */
}
.nav.nav-showing {
  height: 36px;
}

.nav li {
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  list-style: none;
  margin: 8px 12px 12px 12px;
  font-size: 1rem;
  color: var(--head-foot-font-color);
}

.nav li a {
  text-decoration: none;
}
.nav li a:hover {
  text-decoration: underline;
  text-shadow: 5px 5px 6px rgb(98, 125, 247); 
}