body{
	font-family: Calibri;
	margin: 0;
	color: #b3b3b3;
}

@media screen and (min-width: 325px) {
  body {
	background-color: #1c4f32;
  }  
}

@media screen and (min-width: 425px) {
  body {
      background-color: #1C4F37;
	}
	img {
		max-width: 80%;
		height: auto;
	}
}

@media screen and (min-width: 525px) {
  body {
    background-color: #1C4F3C;
	}
}
  
@media screen and (min-width: 625px) {
  body {
    background-color: #1C4F41;
	}
}

@media screen and (min-width: 725px) {
  body {
   background-color: #1C4F46;
  }
}

@media screen and (min-width: 825px) {
  body {
    background-color: #1C4F4B;
	}
}

@media screen and (min-width: 925px) {
  body {
    background-color: #1C4F50;
	}
}

@media screen and (min-width: 1025px) {
  body {
	background-color: #1C4F55;
	}
}

@media screen and (min-width: 1125px) {
  body {
    background-color: #1C4F5A;
	}
}

@media screen and (min-width: 1225px) {
  body {
    background-color: #1C4F5F;
	}
}

@media screen and (min-width: 1325px) {
  body {
    background-color: #1C4F64;
	}
}
  
@media screen and (min-width: 1425px) {
  body {
    background-color: #1C4F69;
	}
}
  
@media screen and (min-width: 1525px) {
  body {
    background-color: #1C4F6E;
	}
}
  
@media screen and (min-width: 1625px) {
  body {
    background-color: #1C4F73;
	}
}
  
@media screen and (min-width: 1725px) {
  body {
    background-color: #1C4F78;
	}
}


h1{
	text-decoration: underline;
	color:#ffffff
}

h3,h2,p{
	color:#b5b5b5;
}

a:link{
	text-decoration:none;
	color:#b5b5b5;
}

a:visited{
	text-decoration:none;
	color:#8c8c8c;
}

table, th, td {
  border:1px solid black;
}

#traditional {
	width: 180px;
	height: 20px;
	background-color: #bfbfbf;
    box-shadow:
		0 6px 6px hsl(0deg 0% 0% / 0.3);
  }

#layered{
	width: 180px;
	height: 20px;
	background-color: #bfbfbf;
	box-shadow:
		0 1px 1px hsl(0deg 0% 0% / 0.075),
		0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075);
  }
  

	.nav {
		font-weight: bold;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
}

 .list {
  float: left;
}

.nav .list a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav .list a:hover {
  background-color: #111111;
}

 .nav .list a.active  {
  background-color: #153B25;
}

		.text, #h1  {
		margin: auto;
		width: min(60%, 275px);
		border: 3px solid #153B25;
		padding: 10px;
	}
	.ctable {
	margin-top: -125px;
	border: 0;
	}
	#h1{
		text-align: center;
	text-weight: underline;
	}
		#text {
		margin: auto;
		width: min(60%, 500px);
		border: 3px solid #153B25;
		padding: 10px;
	}
		.P1{
		text-indent: 25px;
	}
	
	img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}