@charset "utf-8";
/* CSS Document */

html {background-color: #fff;}

body  {background-color: #1b4d3e;
       color: #fefbd8;
       padding:2em;
       font-size: large;}



header {color: #ffd700;
	 background-color:#1b4d3e;
	 padding: 10px 20px;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.logo	{float: right;
	}
#headerContent	{margin: 0}



nav 		 {display: flex;
		  background-color: #8e1d0a;
                  margin: 5px;
                  border-style: solid;
                  border-width: 2px;
                  border-radius: 4px;
                  border-color: #ffd700;
                  text-align: left;
                  padding: 5px 15px 20px 15px;
                  justify-content: center;}

#links a        {text-decoration: underline;
                        text-align: left;
			padding: 2px;
                        color: #ffd700;
                        background-color: #8e1d0a;
                        margin-top: 18px;
                        margin-right: 18px;}

a:link.topic, a:visited.topic	{color: black;}
a:hover.topic			{color: #ffd700;
			 background-color: #1b4d3e}
			
ul	{list-style-type: none;}

nav li {float: left;}

#links a:hover {background-color: #fff;
	 color: #8e1d0a;}
/*
article		   	{display: grid;
			 grid-template-areas:
			 "header header header"
			 "subHeader subHeader subHeader"
			 "t1 p1 p2"
			 "p3 p4 t2"
			 "t3 t3 t3"
			 "p6 p7 p5";
			 grid-template-columns:
			 auto auto auto;
		 	 grid-gap: 10px;}

@media only screen and (max-width: 760px){
	article.container {display:grid;
		grid-template-areas:
		"header"
		"subHeader"
		"t1"
		"t2"
		"p1"
		"p2"
		"p3"
		"p4"
		"p5"
		"p6"
		"t3"
		"p7";
		grid-template-columns:
		auto;}
}

*/

article {background-color: #fff;
	  color: #1b4d3e;
	  padding: 20px 10px;
	  margin: 10px 8px 5px 8px;
	  border: 2px solid red;
	  border-radius: 10px;}

img{max-width: 300px;
	     padding: : 5px;}


footer {text-align: center;
	 font-style: italic;}

p > a  {color: #ffd700;}

table, th, td {border: 2px solid;
		colr: #ffa700}
 
