* {
	   box-sizing: border-box;
	   font-family: 'Garamond', monospace;
		}
		
        body {
        background-color: #eadfd2;
        margin: 0 auto;              /* bring the layout to the top and bottom edges */
        overflow-y: hidden;          /* and then center it */
        }
        
        h1,h2,h3,h4,h5 {
        text-transform: none;
        font-weight: 800;
        padding: 0;
        }
        
       a {
        color: #eadfd2;
        	&:hover {
            color: #eadfd2;           /* change the color when hovered over */
            }
        }

        
        div {                         /* all containers have this style scrollbar */
        scrollbar-color: #aaa transparent;
        scrollbar-width: thin;
        }
        
    	.wrapper {                    /* the wrapper for the entire layout */
        background-color: transparent;
        width: 100%;				  /* the actual width of this container*/
		min-width: 1100px;			  /* container's minimum size, otherwise it can increase with the window size*/ 
        height: 100vh;                /* 100vh is the entire viewport height */
        margin: 0 auto;
        padding: 0;
        overflow-y: hidden;           /* disable scrolling, cut off layout at the */
        }                             /* bottom for a neat look */
        
        .header {
        background-color: #969343;
        color: #eadfd2;
        width: 100%;                  /* 100% of the wrapper’ */
        height: 100px;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        }
        
        .leftBar {                   /* navigation section */
        background-color: #807912;
        color: #eadfd2;
        height: 100vh;               /* 100vh is the entire viewport height */
        width: 100%;
        padding: 1rem;
        text-align: left;
        overflow-y: scroll;          /* disable scrolling */
        	li,ul,ol {
            list-style: "";        /* change list bullet points to this */
            }
          h1,h2,h3,h4,h5 {           /* headings look different in .leftBar */
            text-align: right;
            border-bottom: 1px dashed #fff;    /* underline divider for style */
               &::after {
               content: "";        /* add a fancy symbol after headings */
               }
            }
        }

        .content {
        background-color: #eadfd2;
        color: #5E8FAF;
        height: 75vh;
        width: 100%;
        padding: 1rem 10rem;                /* create a gutter on all sides */
        text-align: left;
        overflow-y: scroll;          /* make only the content section scrollable */
        }
        
        .footer {
        background-color: #DCCAB2;
        border-top: 1px dashed #807912; /* border to separate disclaimer from page text */
        color: #807912;
        font-size: 0.9rem;             /* smaller font compared to page text */
        margin: 0 auto;              /* space between top and bottom of container */
        padding: 1rem;
        text-align: right;
        }
        
        .row {
        display: inline-block;       /* position containers side-by-side */
        width: 100%;
        padding: 0;
        margin: auto;
        }
        
        .leftColumn {
        width: 20%;                  /* only 30% of the entire wrapper’s width */
        float: left;
        margin: 0;                   /* no margins so it’s flushed against the other */
        padding: 0;                  /* column and the edges of the wrapper */
        }
        
        .rightColumn {
        width: 80%;                  /* only 70% of the entire wrapper’s width */
        float: left;
        margin: 0;                   /* no margins so it’s flushed against the other */
        }                            /* column and the edges of the wrapper */

        
		.navigation {				 /* navigation row */
        background-color: #DCCAB2;
        color: #969343;
        width: 100%;
        padding: 0;
        margin: auto;
        text-align: center;
        	a {
            color: #807912;
            text-decoration: none;
            }
        	li,ol {
            width: 19%;            	 /* width is a percentage of the wrapper */
            display: inline-block;   /* display links side-by-side */
            text-transform: lowercase;
            padding: 0;
            }
            h1,h2,h3,h4,h5 {
            	padding: .5rem;
                margin: 0;
                text-align: center;
              	&:hover {
                	color: #807912;
            		background-color: #eadfd2;
                	letter-spacing: .1rem;  /* separate letters on hover */
            	}
            }
    	}
		
		

/* The Image */
div.img img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Description of Image */
div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* Add Responsiveness */
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0.1)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;

}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive Columns */
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
  .modal-content {
    width: 100%;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

/* Clear Floats */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}