.pageborder{
	border:1px solid white;
	background-color:#1b053a;
	width:90%;
	margin:0 auto;
	display:flex;
  }
.mainpage{
	border:1px solid white;
	background-color:#73628a;
	margin:10px;
	display:grid;
	grid-template-areas: 
	"header"
	"nav"
	"content"
	"sidebar"
	"footer";
	background-image:url('../img/img_graphics/img_sg/a01-bg-grid.gif')
  }
  
@media only screen and (min-width: 600px){
	  .mainpage {
		grid-gap: 10px;
		grid-template-areas:
		"header  header"
		"nav     content"
		"sidebar content"
		"footer  footer";
		grid-template-columns: 1fr 6fr;
		grid-template-rows: 150px 450px auto;
		padding:10px
	}
	.pageborder .mainpage nav.mobilenav{
		display:none;
	}
}
.mainpage > header{
	grid-area: header;
	background:url('../img/img_graphics/img_sg/x16-bg-frill.gif') #f5f2b8;
	background-repeat:repeat-x;
	display:flex;
	justify-content: flex-start;
	align-items:flex-end;
	padding-left:10px;
}
.mainpage > nav.desktopnav{
	grid-area: nav;
	background-color:#c5dca0;
	padding:10px;
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.mainpage > nav.desktopnav hr, .mainpage > nav.desktopnav hr:after{
    all:revert;
	height:10px;
	background:url('../img/img_graphics/img_sg/cc05.gif') repeat-x center;
	border:none;
}
.mainpage > nav.desktopnav h3{
    margin:0;font-weight:normal;
}
.mainpage > nav.desktopnav ul{
    padding-left:10px;
	margin:0 auto;
	list-style-image: url('../img/img_graphics/img_sg/ea07-icon-star.gif');
}
.mainpage > main{
	grid-area: content;
	background-color:#dfe7ff;
	padding:10px;
}
.mainpage > main section{
	display:flex;
	justify-content: center;
	align-items:center;
	flex-direction:column;
	text-align:center;
	border:1px solid black;
	margin-bottom:10px;
	padding:10px;
}
.mainpage > main section ul{
		display:table;
		text-align:left;
		list-style-type:symbols(cyclic "❥");
		margin-left:0;margin-right:auto
}
.mainpage > main > section > h2{
	font-weight:normal;
	text-align:center;
}
.mainpage > aside{
	grid-area:sidebar;
	background-color: #fad3fe;
	text-align:center;
}
.mainpage > footer{
	grid-area:footer;
	background-color:#f5f2b8;
	display:inline-flex;
	flex-wrap:wrap;
	padding:5px;
	justify-content: center;
	gap:5px
}

  @media only screen and (max-width: 550px) {
	body .pageborder{
		width:100%;
	}
	.mainpage{
		grid-template-rows: 125px;
	}
	.pageborder .mainpage{
		margin:5px
	}
	.mainpage > header h1{
		font-size:20px
	}
	.pageborder .mainpage nav.mobilenav{
		grid-area:nav;
		background-color:#c5dca0;
		text-align:left;
		top:0;
		position:sticky
	}
	nav.mobilenav img{
		width:40px
	}
	nav.mobilenav hr, nav.mobilenav hr:after{
		all:revert;
		border: none;
		border-top: 1px solid #bebebe;
		margin-top: 25px;
	}
	nav.mobilenav summary, nav.mobilenav ul{
		list-style-type: none;
		margin:0;
		padding:0
	}
	nav.mobilenav li{
		display:inline-block;
	}
	.pageborder .mainpage nav.desktopnav{
		display:none
	}
}