/* page.css */

html,body { height: 100%; margin: 0px; padding: 0px; }
html { background-color: #e2e2e2; }

body {

	background: linear-gradient(to right, #ffe , #5af);
	color: #3e5667;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.PageDiv {
	
	display: block;
	max-width: 960px;
    margin: 0 auto; /* Centre */
}

/* 20 px at left */
.HeaderDiv{  padding: 0px 0px 0px 20px;  }

.MainDiv{ 
	display: block;
	height: 90%;
    max-width: 960px;
	
	border-radius: 15px;
	color: #3e5667;
	padding: 20px;
}

/* 20 px at left */

.BottomDiv { padding: 0px 0px 0px 20px; }

.HeaderText {  
	/* color: #c8c8c8; */
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0px; 
}


/* Notices at bottom of page */

.CopyrightNotice {  font: 8pt Verdana,Arial,Helvetica,Geneva; } 
.Notice { font: 7pt Verdana,Arial,Helvetica,Geneva; } 
.NoticeColor { color: #555; }

.MainImage { 
	
	display: block;
    margin-right: auto;
    
	max-width: 70%;	/* 489px; */
	border-radius: 15px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

/* For NotFound page */

.CentredDiv {
	padding: 50px; 
	width: 50%;
	text-align: center; 
	vertical-align: middle;
	border: solid 1px #ff0; 
	}

/* If width is 800 or smaller */

@media screen and (max-width: 800px ) {

	.Notice { font-size: 6pt;  }

}

@media screen and (orientation: portrait ) {

	.MainImage {  max-width: 100%; width: 100%; }
	.Notice { font-size: 6pt;  }

}

/* Detects landscape mode on phones. Height less than 600, if in landscape mode */

@media screen and (max-height: 600px ) and (orientation: landscape ){

	.PageDiv{ 
		height: 100%;
		display: grid; 
		grid-template-columns: 2fr 3fr;
		grid-template-rows: 1fr 1fr;
	}

	.HeaderText { font-size: 2.0em; }

	/* Align top of left text with image on right. Add 20 px at top */
	.HeaderDiv{ padding: 20px 0px 0px 20px;}

	.HeaderDiv{ grid-area: 1 / 1 / 2 /2; }
	.BottomDiv{ grid-area: 2 / 1 / 3 / 2; }
	.MainDiv{ grid-area: 1 / 2 / 3 / 4; }
	.MainImage { max-width: 100%; width: 100%; }
}