/* 
   /////////
   Mobile
   /////////
    */
     /* 
   /////////
   Main grid mobile
   /////////
    */
     
     html,
     body {
         height: 100%;
         overflow-x: auto;
         overflow-y: auto;
         margin: 0;
         background-color: #87461F;
     }
     
     .main-grid {
         display: grid;
         grid-template-columns: 1fr 1em;
         grid-template-areas: "page";
         padding: 1em;
     }
     /* navigation for mobile */
     
     overlay {
         display: block;
         position: fixed;
         top: 0;
         left: 1em;
     }
     
     #overlay>button {
         background-color: transparent;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;
         border-radius: 10px;
         border: 10px;
         display: block;
         position: fixed;
         right: 20px;
         z-index: 3;
         cursor: pointer;
         color: blue;
         font-family: 'Arial', sans-serif;
         font-size: 40px;
         font-weight: bold;
         padding: 6px 11px;
         text-decoration: none;
     }
     
     button:hover {
         background-color: transparent;
     }
     
     button:active {
         /* /* position: fixed; */
         rotate: 10;
     }
     
     button:focus {
         outline: none;
     }
     
     #nav {
         display: none;
         width: 40%;
         height: 100%;
         padding-top: 2em;
         padding-bottom: 2em;
         padding-left: 1em;
         padding-right: 1em;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 1;
         background-color: #87461F;
         overflow-x: auto;
         box-shadow: 0 0 5em 10em #87461F;
     }
     /* page */
     
     .page {
         grid-area: page;
     }
     
     img {
         margin-top: 1em;
     }
     /* homepage gifs */
     
     .image-space {
         position: absolute;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         margin: 0 auto;
         flex: 0 1 auto;
         width: auto;
     }
     
     .image {
         margin: 5%;
         width: auto;
         height: auto;
     }
     
     .image img {
         object-fit: cover;
         width: 60%;
         height: auto;
     }
     
     #gap1 {
         width: 20%;
         margin: 0;
         padding: 0;
     }
     /* 
   /////////
   Desktop 
   /////////
    */
     
     @media only screen and (min-width: 743px) {
         /* 
   /////////
   Main grid desktop
   /////////
    */
         .main-grid {
             display: grid;
             grid-template-columns: 22em 1fr 10%;
             grid-template-areas: "nav page";
             padding: 1em;
         }
         /* Navigation for desktop */
         #nav {
             display: block!important;
             grid-area: nav;
             width: 18em;
             padding-top: 2em;
             padding-bottom: 2em;
             padding-left: 1em;
             padding-right: 1em;
             position: fixed;
             float: left;
             z-index: 0;
             overflow: auto;
             background-color: #87461F;
             box-shadow: 0 0 0 0 #87461F;
         }
         #overlay {
             display: block;
             grid-area: nav;
         }
         #overlay>button {
             display: none;
         }
         .page {
             grid-area: page;
             padding-top: .5em;
             padding-bottom: 2em;
             padding-left: 1em;
             padding-right: 1em;
             overflow: auto;
             max-width: 1600px;
         }
     }