:root { --header-h: 56px; }

body
{
    margin: 0;
    /* padding-top: 2em; */
    background-color: rgb(83, 77, 77);
    color: white;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;    
    font-size: large;

}
html, body {
    height: 100%;         
    margin: 0;            
    display: flex;
    flex-direction: column;
    font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
    font-size: large;
  }
.navbar{
    color: white;
    background-color: rgba(0, 0, 0, 0.478);
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    background: transparent;
    /* position: static; */
    /* /* position: fixed;
    top: 0;
    left: 0;
    right: 0;                 */
    flex: 1;
    z-index: 1000; 
    padding: 0 .75rem; 
}
/* header {
    /* position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.478); */
    
  /* } */ 
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* height: var(--header-h); */
    z-index: 1000;
    background: rgba(0,0,0,0.478);
    display: flex;
    align-items: center;
    padding: 0 .5rem ;
  }
.navbar a {
    color: white;
    text-decoration: none;
    font-weight: bolder;
    line-height: 1.4;
    padding: .5rem .25rem;
    margin:0;
}
.navbar a:hover {
  text-decoration: underline;
  color: #ddd;
}


.footer {
    background: #222;      
    color: white;
    padding: 1em;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.15);
  }

  

.hamburger {
    display: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: white;
}
/* This makes the page responsive and shows the humberger icon instead of the links side by side
when the screen size reduces to a certain point. */
@media (max-width: 48em) {
    .hamburger {
      display: block;
      font-size: 1.75em;
      margin-left: auto;
      position: relative;
      z-index: 1001;
    }
    #navLinks {
      display: none;
      position: static;
      /* top: var(--header-h);
      left: 0; right: 0; */
      flex-direction: column;
      gap: 1em;
      padding: 1em;
      background: #8b8a8a;
      border-top: 1px solid rgba(255,255,255,.15);
      /* z-index: 999; */
    }
    #navLinks.show { display: flex; }
  }
  @media (min-width: 48em) {
    .hamburger { display: none; }
    #navLinks {
      display: flex;
      gap: 2rem;
      justify-content: flex-end;
      background: transparent;
      padding: 0 .75rem;
    }
  }

.container
{
    flex: 1;
    max-width: 70rem;             
    margin: 2rem auto;            
    padding: 0 1rem;
}


   a {
     color: chartreuse;
     text-decoration: none;
   }

   h1
   {
    margin-bottom: 1em;
   }
   main.container { 
    flex: 1;
    max-width: 70rem;
    margin: 0 auto;
    padding: calc(var(--header-h) + 1rem) 1rem 2rem; }