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

        a:visited {
              text-decoration-color: #7d7d7d;         
        }

        a:hover {
              text-decoration: none;
        }

        a:active {
              text-decoration: none;
        }




        
        div {                         /* all containers have this style scrollbar */
        scrollbar-color: #aaa transparent;
        scrollbar-width: thin;
        }
        .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        }
    	.main {                       /* the wrapper for the entire layout */
        background-color: #0e0e0e;
        width: 1098px;
        height: 93vh;                /* 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: #0e0e0e;
        color: #ff0000;
        width: 100%;                  /* 100% of the wrapper’ */
        height: 100px;
        margin: 0 auto;
        padding: 1em;
        text-align: center;
        }
        
        .leftBar {                   /* navigation section */
        background-color: #0e0e0e;
        color: #fff;
        height: 100vh;               /* 100vh is the entire viewport height */
        width: 100%;
        padding: 2rem;
        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 solid #fff;    /* underline divider for style */
               &::after {
               }
            }
        }
		
		.rightBar {                   /* navigation section */
        background-color: #0e0e0e;
        color: #fff;
        height: 100vh;               /* 100vh is the entire viewport height */
        width: 100%;
        padding: 2rem;
        text-align: right;
        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: left;
            border-bottom: 1px solid #fff;    /* underline divider for style */
               &::before {               }
            }
        }

        .content {
        background-color: #af2222;
        color: #ffffff;
        height: 56vh;
        width: 100%;
        padding: 1rem 2rem;                /* create a 1em gutter on all sides */
        text-align: left;
        overflow-y: scroll;          /* make only the content section scrollable */
        }
        
        .footer {
        background-color: #0e0e0e;
        color: #888;
        font-size: 0.9rem;             /* smaller font compared to page text */
        margin: 0 auto;              /* space between top and bottom of container */
        padding: 1rem;
        text-align: center;
        }
        
        .row {
        display: inline-block;       /* position containers side-by-side */
        width: 100%;
        padding: 0;
        margin: auto;
        }
        
        .sideColumn {
        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 */
        }
        
		.middleColumn {
		width: 60%;                  /* 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 */
		}


        
		.navigation {				 /* navigation row */
        background-color: #af2222;
        color: #000;
        width: 100%;
        padding: 0;
        margin: auto;
        text-align: center;
        	a {
            color: #000;
            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: #fff;
            		background-color: #ff0000;
                	letter-spacing: .1rem;  /* separate letters on hover */
            	}
            }
    	}