body { 
   font-family:Sanchez-Regular;
   display: grid;
   grid-template-areas: 
    "nav article";
   grid-template-rows: 100% 1fr; /* */
   grid-template-columns: 85% 15%; /* 90% 3fr 15%; */
  
   grid-row-gap: 0px;
   grid-column-gap: 0px;
   height: 100vh;
   margin: 0;
   padding: 0;
   
  }  

@font-face {
    font-family: 'Sanchez';
    src: url('fonts/Sanchez-Regular.woff') format('woff'),
         url('fonts/Sanchez-Regular.ttf') format('truetype'),
         url('fonts/Sanchez-Regular.woff2') format('woff2');
}

#mainArticle { 
  grid-area: article;  /* Alphabet Area*/
  overflow: auto;
 
  }
  
#mainNav { 
  grid-area: nav; /* Stage Area*/
  /*position:fixed;PG - you cannot have fixed if you want to actively resize!*/
  overflow-x: hidden;
  overflow-y: hidden;
  }


/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "article"
      "nav";
      
    grid-template-rows: 1fr 70px;
    grid-template-columns: 1fr; 
 }
}

      #drag-items img {
       /*AM 7March height: 100px;*/
       height:auto;
       width:35%;
        margin-left: 0px; /* Same as the width of the sidebar */
        padding: 0px 5px;
      }

      /* The sidebar menu */
      #drag-items {
        /*height: 85%; /* Full-height: remove this if you want "auto" height  - was 87*/
        /*max-width: 400px; /* Set the width of the sidebar */
        /*min-width: 300px;*/
        /*width: 20%;*/
        float:right;
        z-index: 3;
       /* position:Fixed; /* Fixed Sidebar (stay in place on scroll) */
        /*z-index: 1; /* Stay on top */
        /*AM 16/9  top: 0; /* AM Stay at the top */ 
        /*AM 16/9  left: 0; AM - did this for alphabet slider
        /*AM 16/9  background-color: #111; /* Black */
        overflow-x: hidden; /* Disable horizontal scroll */
        /*AM 16/9  padding-top: 20px; AM */
      }
	  

      #button {
        position: absolute;
        top: 30px;
        left: 160px;
      }
	 
*:focus {
    outline: none;
}