.layout {
  width: 100%;
  max-width:1250px;
  margin: 0 auto;
  overflow:hidden;

}

.header {
	border-radius: 15px 15px 0px 0px;
	grid-area: header;
	background-color: #FF9933;
	height: 200px;
	vertical-align: middle;
	text-align: center;
}
.mynav { grid-area: mynav; }

.main { grid-area: main; 
}

.footer { 
    grid-area: 1 / 1 / 4 / 3; 
	height: 200px;
	background-color: #FF9900;
	background-image: url('../images/footyer.png');



}

#cssportal-grid {
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	width: 100%;
	height: 100%;
}
#div1 {
	grid-area: 1 / 1 / 7 / 3;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}
#div2 {
	grid-area: 1 / 3 / 7 / 7;
	padding:5px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;

}
img.floatpotato {
width:100%; 
height:auto;
padding-bottom:10px;
padding-right:10px;
max-width: 400px;
}

img.close {
width:25px; 
height:25px;
}

@media screen and (max-width: 650px){
img.headerimg {
	width: 450px;
	height: 126px;
	padding-top: 40px;
}

#cssportal-grid {
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	width: 100%;
}
#div1 {
	grid-area: 1 / 1 / 4 / 3;
	width:100%;
}
#div2 {
	grid-area: 4 / 1 / 7 / 3;
	width:100%;
	}

img.floatpotato {
width:400px; 
height:auto;
padding-bottom:10px;
padding-right:10px;
}

img.close {
width:40px; 
height:40px;
}





}