html {background-color: #1c3879;}

body  {background-color: #607eaa;
       color: #1c3879;
       padding:2em;
       font-size: large;}


.header {grid-area: header;
	 background-color:#eae3d2;
	 padding: 10px 20px;}

.leftNav {grid-area: leftNav;
		  display: flex;
		  flex-direction: column;
		  text-align: left;
	 	  background-color:#eae3d2;
		  padding: 20px 15px;}


.article {grid-area: article;
	  background-color: #f9f5eb;
	  padding: 20px 10px;
	  border: 2px solid #1c3879;
	  border-radius: 10px;}

.article img{max-width: 500px;
			 padding: : 5px;}

.footer {grid-area: footer;
     color: #f9f5eb;
	 text-align: center;
	 font-style: italic;}


.grid-container { display: grid;
		  grid-template-areas:
		  'header header header header header header'
		  'leftNav article article article article article'
		  'footer footer footer footer footer footer';
		  background-color: #1c3879;
		  padding: 10px;}

@media only screen and (max-width: 710px) {
    .grid-container {display: grid;
		     grid-template-areas:
		     'header'
			 'leftNav'
			 'article'
		         'footer';
		     background-color: #4040a1;
		     padding: 10px;}
	
}			 

#linkBox {display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: #eae3d2;}

. links {justify-content: left;
}
	

a:link, a:visited {color: #9f5255;
   background-color: #eae3d2;}

a:hover {background-color: #607eaa;
	    color: #f9f5eb;}


ul {list-style: none;
	justify-content: flex-start;}