html {
   height: 100%
 }
 
 
 
      .holy-grail-grid {
        display:grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: auto;
        grid-template-areas:
          'header header header'
          'left-sidebar main-content main-content'
          'footer footer footer';
      }
      
      .holy-grail-grid > * {
        padding:1rem;
      }
      
.holy-grail-grid > .header {
  
    grid-area:header; 
    background-image: urL(webplane2.png); 
    background-position: center; 
    border:1px solid black; 
    border-radius: 10px 10px 0px 0px; 
    height: 90px; 
    overflow: hidden; 
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.7);
}
    
.holy-grail-grid > .main-content {
  grid-area:main-content;
  background:white; 
  border-right: 1px solid black;
  min-height: 800px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}

.holy-grail-grid > .left-pillar {
  background:white; 
  border-left:1px solid black;
  border-right: none;
}

.holy-grail-grid > .right-pillar {
  background:white; 
  
}

.holy-grail-grid > .left-sidebar {
  grid-area:left-sidebar;
  background: linear-gradient(180deg,rgba(149, 200, 222, 0.81) 0%, rgba(255, 255, 255, 0.92) 100%); 
  border-left:1px solid black; 
  border-right:1px solid black;
}

.holy-grail-grid > .footer {
  grid-area:footer;
  background:white; 
  border:1px solid black;
  max-width: 1024px;
   
}
    
      body {
        min-height: 100%;
        width: 1024px;
        margin:0 auto;
        padding:10px;
        background-color: black;
        background-image: url(vab.png);
        background-position: center;
        background-size: cover;
        min-height: 1100;
        font-family: 'Zen Dots';
      }
      
      h1 {
        max-width: 1000px;
        font-family: 'Zen Dots';
        font-style: normal;
        text-align: left;
        margin-left: 25px;
        color: white;
        text-shadow: 3px 2px black;
        
      }
      
      ul {
        list-style-type: none;
        margin-left: -20px;
        padding: 0px;
        overflow: hidden;
      }
      
      ul li {
        float: left;
      }
      
      ul li a {
        display: block;
        color: #424242;
        background: white;
        padding: 2px 16px;
        margin-right: 3px;
        border-left: solid 1px black;
        border-right: solid 1px black;
        border-top: solid 1px black;
        border-bottom: 0px;
        border-radius: 3px 3px 0px 0px;
        font-family: 'Jersey 20';
        font-size: 20px;
        font-weight: 100;
        text-decoration: none;
      }
      
      ul li a:hover {
        background-color: #CEECF2;  
      }
      
      #wiki ul li a::marker {
      color: lightblue;
}