/*     * { padding: 0;  }  

light green=#c5d5cb
light grey=#9fa8a3
beige=#e3e0cf

orange=#fb8122 (rgb(251, 129, 34))
darkgrey#1d2228 (rgb(29, 34, 40))
lightgrey#e1e2e2 (rgb(225, 226, 226))

newlogo brown13=#B97527
newlogo teal14=#27B9B4

nantucket blue 15: 
RGB: 104 140 162
HEX: #688ca2

green logo16=#3CFF00

yellow logo18=#FFD500

*/

:root {
/*--headfootbody: #c5d5cb;
--navigatehover: #9fa8a3;
--artnavdiv: #e3e0cf;
--artnavbodtext: black;*/

/*--headfootbody: #fb8122;
--navigatehover: #1d2228;
--artnavdiv: #e1e2e2;
--artnavbodtext: black;*/

/*--headfootbody: #fb8122;*/
--headfootbody: linear-gradient(90deg,rgba(251, 129, 34,1),rgba(251, 60, 34,1));
--navigatehover: #e1e2e2;
--artnavdiv: #1d2228; 
--artnavbodtext: #e1e2e2;
}

body { 
display: grid;
grid-template-areas: 
"header header"
"nav article"
"nav ads"
"footer footer";
grid-template-rows: 110px 1fr 70px 70px;  
grid-template-columns: 25% 1fr;
grid-row-gap: 5px;
grid-column-gap: 5px;
height: 100vh;
margin: 5px;
font-family: 'Merriweather', serif;
font-size:1.2rem;
line-height: 1.7em;
//background:var(--headfootbody);
color: var(--artnavbodtext);
max-width:1200px;
margin:5px auto;
}

html{
background: url('../img/back-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

h1,h2,h3,h4{
font-family: 'Montserrat', sans-serif;
font-weight:800;
//color:#fb8122;
//color:#B97527;
	//color:#27B9B4;
	//color:#688ca2;
	//color:#3CFF00;
	//color:#0068FF;
	color:#FFD500;
}

#pageHeader > a:nth-child(1) > img:nth-child(1){
	//max-width:170px;
	//border:1px solid black;
	padding-top:.5rem;
}

header{
float:left;
font-size:2rem;
font-family: 'Montserrat', sans-serif;
//padding-top:1.3rem;
padding-left:.8rem;
color:#fb8122;
	//border:1px solid white;
	background:RGBA(0,0,0, .8);
	//background: url('../img/logo1.png') no-repeat left;
}

.biglet{
font-size:3rem;
}

footer{
float:left;
font-size:.9rem;
line-height: 1.5;
	padding:.8rem;
	//border:1px solid white;
	//background:rgba(0,0,0,.8);
		background:RGBA(0,0,0, .8);
	//color:#1d2228;
}

#pageFooter > img:nth-child(1){
float:right;
	//border:1px solid #1d2228;
}


.f-left{
	float:left;
	margin-right:20px;
	opacity: 0.7;
}

.f-right{
	float:right;
	margin-left:20px;
	opacity: 0.7;
}

article, nav, div {
padding: 1.2em;
//background: var(--artnavdiv);
	background:rgba(0,0,0,.6)
}

#mainArticle > img{
max-width:50%;
margin-bottom:20px;
}

#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle { 
grid-area: article;      
}
#mainNav { 
grid-area: nav; 
}
#siteAds { 
grid-area: ads; 
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
	//border:5px solid black;
}

li a {
display: block;
color: var(--artnavbodtext);
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
//background-color: var(--navigatehover);
//color: #fb8122;
	//color:#B97527;
	//color:#27B9B4;
	//color:#688ca2;
	//color:#3CFF00;
	//color:#0068FF;
	color:#FFD500;
	background:rgba(0,0,0,.6)
}  

input[type = submit] {
//background-color: #fb8122;
	background-color:	#FFD500;
border: solid #e1e2e2 2px;
border-radius:10px;
text-decoration: none;
//color: #e1e2e2;
		color:#1d2228;
font-family: 'Merriweather', serif;
font-size:1.2rem;			
padding: 10px 10px;
cursor: pointer;
}

button{
//background-color: #fb8122;
	background-color:#FFD500;
border: solid #e1e2e2 2px;
border-radius:10px;
text-decoration: none;
//color: #e1e2e2;
		color:#1d2228;
font-family: 'Merriweather', serif;
font-size:1.2rem;			
padding: 10px 10px;
cursor: pointer;
}

.textbox{
width:95%;
}

#inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
}
#inner-grid > div {
border:solid #e1e2e2 1px;
padding: 5px;
}


/*******************************************responsive*******************************************/
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 768px) {
#inner-grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}

@media all and (max-width: 575px) {
body { 
grid-template-areas: 
"header"
"nav"
"article"
"ads"
"footer";
grid-template-rows: 110px 1fr 1fr 70px 70px;  
grid-template-columns: 1fr;
}

ul{
text-align:center;
margin:0;
padding:0;
}

#mainArticle >  img{
max-width:100%;
}
	
	#pageHeader > a:nth-child(1) > img:nth-child(1){
		float:none;
		display:block;
		margin:auto;
	}
	
}

@media all and (max-width: 351px) {
	body { 
grid-template-rows: 110px 1fr 1fr 70px 100px;  
}

}

@media all and (max-width: 324px) {
//header{padding:0;}
.regh1{font-size:1.6rem;}
}