@media only screen and (orientation: portrait) {
body {
	margin: 0;
	padding: 0;
	width: auto;
/*	font-family: "Brush Script", Cursive; */ 
/*	font-family: "Comic Sans MS"; */ 
	font-family: "Garamond", Thahoma; 
	font-style: oblique; 
	font-size: 0.5em;
	line-height: auto;
	color: #333333;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: min-content min-content;
	gap: .5em;
/*	min-height: 100vh; */
/*	min-height: 50vh; */
/*	min-height: min-content; */
}

.Po {
	font-size: 0.7em;
}

.LogoHL {
    height: 1em;
	text-align: left;
}

.LogoL {
   width: auto;
   height: 300%;
}

.LogoH {
    height: 3em;
	text-align: center;
}

.LogoHR {
    height: 1em;
	text-align: right;
}

.LogoR {
   width: auto;
   height: 300%;
}

.H01 {
   width: 100%;
   height: auto;
}

.Pwd {
	padding: .4em;
	border-radius: 0.5em 0.5em 0.5em;
	text-align: left;
	font-size: 0.6em;
	background: #fff7bc;
}

.PwdB {
	border: medium solid;
	padding: .4em;
	border-radius: 0.5em 0.5em 0.5em;
	font-weight: bold;
	text-align: left;
	font-size: 0.5em;
	border-color: black;
	color: green;
}

nav,
article,
aside,
footer {
	border-radius: 0 0.5em 0.5em;
	border: medium solid;
	padding: .5em;
	line-height: 1em;
	min-height: content; 
}

header {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	border-radius: 0 0.5em 0.5em;
	border: medium solid;
	padding: .5em;
	background: #F1F3F4;
	border-color: white;
	grid-column: 1 / span 3;
	grid-row: 1;
}

ul {
	list-style-type: none;
	padding-left: 0.2em;
}

li {
	text-decoration: none;
	font-weight: bold;
}

nav {
	font-size: 1.5em;
	background: #BBDDFF;
	border-color: white;
	grid-column: 1;
	grid-row: 2 / 4;
	line-height: 1em;
}

article {
	background: #F7F3ED;
	border-color: white;
	grid-column: 2;
	grid-row: 2 / 4;
	line-height: 1.5em;
}

footer {
	font-size: 1.3em;
	font-weight: bold;
	background: #F1F3F4;
	border-color: white;
	grid-column: 1 / span 2;
	grid-row: 4;
}

h1,
h2,
p,
a,
li
{
	color: darkblue;
	text-decoration: none;
}

h1 {
	text-align: center;
	max-width: 100vh;
}

h2 {
	/*border: thin dotted;*/
}

p {
	font-size: 1.5em;
	line-height: 1em;
}

}

/*	=========================================== */
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*	=========================================== */

@media only screen and (orientation: landscape) {
body {
	margin: 0 auto;
	max-width: 60em;
/*	font-family: "Brush Script", Cursive; */ 
	font-family: "Garamond", Thahoma; 
	font-style: oblique; 
	font-size: 1.em;
	line-height: auto;
	color: #333333;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: min-content min-content;
	gap: .5em;
/*	min-height: 100vh; */
/*	min-height: 50vh; */
/*	min-height: min-content; */
}

.Po {
    display: none;
	font-size: 0.7em;
}

.LogoHL {
    height: 1em;
	text-align: left;
}

.LogoL {
   width: auto;
   height: 300%;
}

.LogoH {
    height: 3em;
	text-align: center;
}

.LogoHR {
    height: 1em;
	text-align: right;
}

.LogoR {
   width: auto;
   height: 300%;
}

.H01 {
   width: 100%;
   height: auto;
}

.Pwd {
	padding: .4em;
	border-radius: 0.5em 0.5em 0.5em;
	text-align: left;
	font-size: 0.6em;
	background: #fff7bc;
}

.PwdB {
	border: medium solid;
	padding: .4em;
	border-radius: 0.5em 0.5em 0.5em;
	font-weight: bold;
	text-align: left;
	font-size: 0.5em;
	border-color: black;
	color: green;
}

nav,
article,
aside,
footer {
	border-radius: 0 0.5em 0.5em;
	border: medium solid;
	padding: .5em;
	line-height: 1em;
	min-height: content; 
}

header {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	border-radius: 0 0.5em 0.5em;
	border: medium solid;
	padding: .5em;
	background: #F1F3F4;
	border-color: white;
	grid-column: 1 / span 3;
	grid-row: 1;
}

ul {
	list-style-type: none;
	padding-left: 0.2em;
}

li {
	text-decoration: none;
	font-weight: bold;
}

nav {
	font-size: 1.5em;
	background: #BBDDFF;
	border-color: white;
	grid-column: 1;
	grid-row: 2 / 4;
	line-height: 1em;
}

article {
	background: #F7F3ED;
	border-color: white;
	grid-column: 2;
	grid-row: 2 / 4;
	line-height: 1.5em;
}

footer {
	font-size: 1.3em;
	font-weight: bold;
	background: #F1F3F4;
	border-color: white;
	grid-column: 1 / span 2;
	grid-row: 4;
}

h1,
h2,
p,
a,
li
{
	text-decoration: none;
	color: darkblue;
}

h1 {
	text-align: center;
}

h2 {
	/*border: thin dotted;*/
}

p {
	font-size: 1.5em;
	line-height: 1em;
}

}