@charset "utf-8";
/* CSS Document */

html {background-color: #d4e2eb;}

body  {background-color: #15253f;
       color: #d4e2eb;
       padding:2em;
       font-size: large;}

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

#logo	{float: right;
	 border-radius: 50%; }


section.links		 {grid-area: leftNav;
		  display: flex;
		  flex-direction: column;
		  background-color: #5e9dc8;
		  color: #15253f;
		  margin: 5px;
		  border-style: solid;
		  border-width: 2px;
		  border-radius: 4px;
		  border-color: 15253f;
		  text-align: left;
		  padding: 5px 15px 20px 15px;
		  justify-content: left;}

section.links a 		{text-decoration: none;
			text-align: left;
			color: #fefbd8;
  			background-color: #36486b;
			margin-top: 8px;
			margin-left: 18px;
			padding: 0 8px;}


section.links h3 {margin-bottom: -5px;
		  margin-top: 0;}

section.links h4  {	font-family: "New Times Roman";
		font-size: 20px;
		font-weight: bold;
		margin-bottom: -5px;
		margin-top: 8px;}

section.links > button	{background-color: #36486b;
			 color: #fefbd8;
			 margin-top: 8px;
		 	 border-radius: 4px;
			 margin-left: 15px;
		 	 text-align: left;
		 	 font-size: 17px;}

.article {grid-area: article;
	  background-color: #d4e2eb;
	  color: #15253f;
	  padding: 20px 10px;
	  border: 2px solid #15253f;
	  border-radius: 10px;}

.footer {grid-area: footer;
	 background-color: #15253f;
	 color: #d4e2eb;
	 text-align: center;
	 font-style: italic;}

.footer a	{color: #d4e2eb;}

.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: #5e9dc8;
		  padding: 10px;}

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


#linkBox {display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	background-color: #618685;}

li {margin-top: 1em;}

a:hover {background-color: #fefbd8;
	    color: #36486b;}


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