*{
    margin: 15;
    padding: 15;
    
}

.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
background-color:  #546839;
}
.header{
	    
        grid-column-end: span 5;
        grid-row-end: span 2;

        padding-top: 10px;
        padding-bottom: 15px;
        padding-left: 60px;
        background-color:  #ededed;
        text-shadow: 3px 4px #ccc;
        font-size: 60px;
        line-height: 45px;
        font-family: 'Crete Round', serif;
        font-weight: 300;
        letter-spacing: 1px;
        border: 3px solid #ccc;
	    border-radius: 3px;
	    margin: 4px;
	   
}
.description{
	     font-size: 20px;
         margin: 5px 0px;
}
.navbar{
	    
        grid-column-end: span 5;
        grid-row-end: span 2;
        padding: 20px;
        background-color:  #607D8B;
        font-family: 'PT Serif', serif;
		font-size: 25px;
		color: #fff;
		line-height: 1.6;
		display: block;
        border: 3px solid #ccc;
	    border-radius: 3px;
	    margin: 4px;

	    

}

.sidebar{
		grid-column-end: span 1;
		grid-row-end: span 2;

		
		padding: 20px;
	    background-color:  #ededed;
        font-family: 'PT Serif', serif;
		font-size: 20px;
		
		line-height: 1.6;
		display: block;
        border: 3px solid #ccc;
	    border-radius: 3px;
	    margin: 4px;

	    }
    


.content{
	    background-color:  #ededed;
        grid-column-end: span 4;
        grid-row-end: span 2;
        padding: 20px;
	    background-color:  #ededed;
        font-family: 'PT Serif', serif;
		font-size: 30px;
		
		line-height: 1.6;
		display: block;
        border: 3px solid #ccc;
	    border-radius: 3px;
	    margin: 4px;

}

.footer{
	   
        grid-column-end: span 5;
        grid-row-end: span 2;
        padding: 20px;
        background-color:  #607D8B;
        font-family: 'PT Serif', serif;
		font-size: 17px;
		color: #fff;
		line-height: 1.6;
		display: block;
        border: 3px solid #ccc;
	    border-radius: 3px;
	    margin: 4px;
	    }

     /*
        @media screen and (min-width: 736px){

    /*media inquiry should display the browser 
    version. as the browser width shrinks or if displayed on 
    a device with width < 736px, the display will switch to
    cell phone version. In an unsupported browser, the cell
    version will display. */


    /*
    .grid{
        display: grid;

        */
    
        /*
        grid-template-columns: 1fr 1fr;
        */
         /*
        Column grid. Line 1 1fr Line 2 1fr Line 3.
        grid-template-columns: auto 1fr;
        */
        /*
        auto. shrinks or stretch to fit size of the content
        */
        /*
        grid-template-columns: 200px 1fr;
        grid-template-columns: 20% 1fr;
        */
        /*
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
        "title title"
        "header header"
        "sidebar content"
        "footer footer";
        */
       /*
        grid-template-areas:
        "footer footer"
        "header header"
        "sidebar content"
        "title title"
        */
        /*
        grid-template-areas:
        "title title"
        "header header"
        "sidebar content"
        "sidebar footer";
        */
        /*
        grid-template-areas:
        "title title"
        "header ."
        "sidebar content"
        "sidebar footer";
        */
    
        /*makes a wrapper
        grid-template-columns: 1fr 500px 500px 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-gap: 2px;*/

        /*

        grid-template-areas:
        
        ". header header header header header ."
        ". navbar navbar navbar navbar navbar ."
        ". sidebar sidebar sidebar sidebar sidebar ."
        ". content content content content content ."
        ". footer footer footer footer footer .";
        
        }

        */
    
    
    /*
    .title{
        */
        /*
        grid-column-start: 1;
        grid-column-end: 3; 
        grid-column: 1 / 3;
        grid-column-end: 3;
        grid-column-end: span 2;
        */
        /*
        grid-column-end: span 1;
        grid-row-end: span 2;
        }
        */
        
    	/*
        
        }
        .header{
            grid-area: header;
        }   
        .navbar{
            grid-area: navbar;
        }
        .sidebar{
            grid-area: sidebar;
        }
        .content{
            grid-area: content;
            /*the grid uses the space that the content uses
            the rest is whitespace*/
            /*
            justify-self: start;
            justify-self: end;
            */

             /*

            justify-self: center;
            align for vertical*/

			/*

            align-self: start;  
            


            align-self: end;
            align-self: center;
            */
            /*creating a grid within a grid area. 
            for nested items
            display: grid;*//*
        }

    .footer{
        grid-area: footer;
    }*//*
}*/