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

html {background-color: #fefbd8;}

body  {background-color: #4040a1;
       color: #002366;
       padding:2em;
       font-size: large;}


header {grid-area: header;
         background-color:#d4af37;
         padding: 10px 20px;
 	 border-radius: 25px;
	 border-style: solid;
	 border-color: #fefbd8;
 	 border-width: 4px;
 	}

.logo {float:right;
       border-radius: 40px;
      }

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#headerContent	{margin: 0;}

.layout	 {border-radius: 5px;
                   margin: 20px 10px;
                   max-width: 400px;
                   padding: : 5px;
	           border-style: solid;
                   padding: 1em;
	           border-radius: 10px;
	           border-width: 2px;
  	           border-color: #002366;}

figcaption {text-align: center;
	    font-style: italic;}


nav {grid-area: nav;
     text-align: left;
     margin: 20px 5px;
     border-style: solid;
     border-radius: 10px;
     border-width: 2px;
     border-color: red;
     padding: 10px 0 10px 10px;
     color: #fefbd8;
     justify-content: left;
    }


.minorHeader	{margin-top: 10px;
		 margin-bottom: 1px;
	 	 font-size: 1.2em;}

.subHead	{font-size: 1em;
	 margin-bottom: 5px;
 	 margin-top: 10px;}

nav a	{text-align left;
	display: block;
 	}


 a:link {color: #fefbd8;
 	        padding-right: 2em;}

 a:visited {color: #add8e6;
                padding-right: 2em;}

 a:hover {color: #ffd700;
                padding-right: 2em;}

 a:active {color: #dcdcdc;
                padding-right: 2em;}

nav p	{margin: 0;}

article p	{text-align: left;}

article {grid-area: article;
	 border-style: solid;
	 margin: 20px 5px;
	 padding: 10px 2em;
         border-radius: 10px;
         border-width: 2px;
         border-color: #ffd700;
         color: #002366;
 	 background-color:#dcdcdc;
	}

a:link.subject {color: #4040a1;
                padding-right: 2em;}

 a:visited.subject {color: green;
                padding-right: 2em;}

a:hover.subject {color: red;
                padding-right: 2em;}

 .subject a:active {color: #ffd700;
                padding-right: 2em;}

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



#grid-container { display: grid;
                  grid-template-areas:
                  'header header header header header header'
                  'nav article article article article article'
                  'footer footer footer footer footer footer';
                  background-color: #4040a1;
                  padding: 10px;}

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