*, *::before, *::after {
   box-sizing: border-box;
}

img, picture, svg, video {
   display: block;
   max-width: 100%;
}

body {
   overflow-x: hidden; /* this is for the menu so it may not cause shift */
   min-height: 100vh;
   min-height: 100dvh;
   display: grid;
   grid-template-rows: auto 1fr auto;
}

.ngc-footer{
   margin-top: 5em;
}

#content > h4 {
   text-align: center;
}

.flex {
   display: flex;
   gap: var(--gap, 1rem);
}

.grid {
   display: grid;
   gap: var(--gap, 1rem);
}

.primary-navigation{
   list-style: none;
   padding: 0;
   margin: 0;
}

.primary-navigation a {
   text-decoration: none;
   color: black;
}

.hamburger-lines{
   display: none;
}

.hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}   

/* see:  https://www.youtube.com/watch?v=HbBMp6yUXO0 */
@media (max-width: 35em){
   .primary-navigation{
      --gap: 1em;
      position: fixed;
      z-index: 1000;
      inset: 0 0 0 30%;
      flex-direction: column;
      padding: min(10vh, 4rem) 2em;
      background: hsl(0 0% 20% / 0.9);
      transform: translateX(100%);
      transition: transform 350ms ease-out;
   }
   .primary-navigation a {
      color: white;
   }
   
   .primary-navigation[data-visible="true"]{
      transform:translateX(0%);
   }
   
   .hamburger-lines {
     display: block;
     height: 20px;
     width: 20px;
     position: absolute;
     top: 1rem;
     right: 1rem;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: darkgrey
   }
   
   .hamburger-lines[aria-expanded="true"] > .line1 {
       transform: rotate(45deg);
   }
   .hamburger-lines[aria-expanded="true"] > .line2 {
       transform: scaleY(0);
   }
   .hamburger-lines[aria-expanded="true"] > .line3 {
       transform: rotate(-45deg);
   }   
   
   #header-right{
      display: none;
   }
   @supports(backdrop-filter: blur(1rem)){
      .primary-navigation{
         background: hsl(0 0% 20% / 0.9);
         backdrop-filter: blur(1rem);
      }
   }
}