*				{ box-sizing: border-box; position: relative }
html			{ scroll-behavior: smooth }
body 			{ min-width: 670px; color: #fff; margin: 0; padding: 0; background-color: #1e73be;
				  font-family: Montserrat, "Segoe UI", "Noto Sans", Verdana, "Helvetica Neue", Helvetica, sans-serif;
				  font-size: 1em; line-height: 1.4; word-wrap: break-word }
a				{ color: #fca; text-decoration: none }
a:hover			{ text-decoration: underline }
ul				{ list-style-type: '🔶'; padding-left: 30px }
li 				{ padding-left: 12px }
td				{ vertical-align: top; padding-right: 15px }
iframe			{ min-width: 670px; min-height: 500px; width: 100%; height: auto; border: 0; border-radius: 15px }

.menuSpacer 	{ height: 100%; min-height: 220px }

#menu		 	{ transition: all 0.4s ease; text-align: left; z-index: 10; top: 0px; padding: 5px 10px; text-shadow: 1px 1px 3px #444 }
#menu a 		{ display: inline-block; padding: 0px 15px; text-decoration: none; height: 100% }
#menu h2		{ border-radius: 5px; padding-bottom: 3px; transition: background .4s linear }
#menu h2:hover	{ background-color: #ce7c32; background-image: linear-gradient(0deg, #0e539e, #2e93de) }
#menu h2:active	{ background-color: #ce7c32; background-image: linear-gradient(0deg, #ac510e, #ce7c32) }

#menu h1		{ user-select: none; display: inline-block; vertical-align: bottom; padding-left: 20px; font-size: 4em }
#menu h2		{ display: inline; left: 130px }
#menu img		{ user-select: none; width: 178px; height: 154px; box-shadow: 0 0 5px 5px #fff; border-radius: 10px }

#menu.top 	 	{ position: fixed;    height: 50px; width: 100%; background-color: #383838; border-bottom: 1px solid #303030 }
#menu.offset 	{ position: relative; height: auto; text-align: center; background-color: Transparent; border-bottom: 0; border-radius: 100%; margin: 10px; font-weight: bold }
#menu.top img	{ width: 40px; height: 39px; box-shadow: none; border-radius: 3px }
#menu.top h1	{ display: inline-block; font-size: 16px; vertical-align: top; padding: 0 10px; z-index: 5 }
#menu.top h2 	{ display: inline-block; font-size: 16px; vertical-align: top; padding: 5px 10px 0 10px; z-index: 5; height: 2em; margin-block: 5px; left: auto }

#menu.offset .items { display: block; top: -2em }
#menu.top    .items { display: inline; float: right }

#container				{ top: 0; padding: 0 10px 10px 10px; max-height: 99999px }
#container h1,			
#container h2			{ font-weight: bold; border-bottom: 1px solid #ccc; text-shadow: 1px 1px 3px #444; margin-block: 0 }

#container img 			{ width: auto; height: 240px; margin: 1em 1em 0 0; border-radius: 10px; box-shadow: 0 0 4px 1px #fff; transform-origin: 0% 50%; transition: all ease 0.4s }
#container img:hover  	{ z-index: 3; filter: saturate(130%) contrast(110%) brightness(110%); transform: scale(200%) }
#container center 		{ margin-top: 2em }
#container center img   { transform-origin: 50% 100% }


@media screen and (min-width: 960px) and (max-width: 1089px) {
	#menu.offset h1 	{ display: block; padding-left: 0 }
	#menu.offset h2		{ left: 0 }
	#menu.top h2		{ padding: 5px 5px 0 0 }
}

@media screen and (max-width: 880px) and (max-width: 959px) {
	#menu.offset h1 	{ display: block; padding-left: 0 }
	#menu.offset h2		{ left: 15px }
	#menu.top 			{ height: 100px }
	#menu.top h2		{ padding: 5px 5px 0 0 }
	#menu.top .items 	{ display: inline-block; float: none }
}

@media screen and (min-width: 769px) and (max-width: 879px) {
	#menu.offset h1 	{ display: block; padding-left: 0; font-size: 3em }
	#menu.offset h2		{ left: 0 }
	#menu.top 			{ height: 100px }
	#menu.top h2		{ padding: 5px 5px 0 0 }
	#menu.top .items 	{ display: inline-block; float: none }
}

@media screen and (max-width: 769px) {
	#menu.offset h1 	{ display: block; padding-left: 0; font-size: 3em }
	#menu.offset h2		{ left: 0 }
	#menu.top 			{ height: 100px }
	#menu.top h2		{ padding: 5px 0 0 0 }
	#menu.top .items 	{ display: inline-block; float: none }

	/*#container			{ font-size: 1.1em } */
	#container center 	{ margin-top: 0 }
	#container img		{ display:block; width: 100%; height: auto; margin: 0 auto 1em auto; border-radius: 15px 15px 0 0; box-shadow: 0 0 5px 1px #666 }
	#container img:hover{ filter: none; transform: none }
}