asaage/squares.html Secret

## squares.html
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style>
		@media (orientation: landscape) {
			:root {
				--size: 50vw;
			}
			#container {
				grid-template-columns: repeat(2, 1fr);
			}
			#main {
				justify-self: end;
			}
			#right {
				justify-self: start;
			}
		}
		@media (orientation: portrait) {
			:root {
				--size: 50vh;
			}
			#main,
			#right {
				justify-self: center;
			}
		}
		body {
			margin: 0;
			width: 100vw;
			height: 100vh;
		}
		#wrapper {
			display: grid;
		}
		#header,
		#footer {
			display: none;
		}
		#container {
			display: grid;
		}
		#main {
			background: green;
		}
		#right {
			background: cyan;
		}
		#main,
		#right {
			width: var(--size);
			height: var(--size);
		}
	</style>
</head>
<body id="top">
	<div id="wrapper">
		<header id="header">
			<div class="inside">header</div>
		</header>
		<div id="container">
			<main id="main">
				<div class="inside">main</div>
			</main>
			<!--
			<aside id="left">
				<div class="inside">left</div>
			</aside>
			-->
			<aside id="right">
				<div class="inside">right</div>
			</aside>
		</div>
		<footer id="footer">
			<div class="inside">footer</div>
		</footer>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="de" dir="ltr">
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style>
	@media (orientation: landscape) {
	:root {
	--size: 50vw;
	}
	#container {
	grid-template-columns: repeat(2, 1fr);
	}
	#main {
	justify-self: end;
	}
	#right {
	justify-self: start;
	}
	}
	@media (orientation: portrait) {
	:root {
	--size: 50vh;
	}
	#main,
	#right {
	justify-self: center;
	}
	}
	body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	}
	#wrapper {
	display: grid;
	}
	#header,
	#footer {
	display: none;
	}
	#container {
	display: grid;
	}
	#main {
	background: green;
	}
	#right {
	background: cyan;
	}
	#main,
	#right {
	width: var(--size);
	height: var(--size);
	}
	</style>
	</head>
	<body id="top">
	<div id="wrapper">
	<header id="header">
	<div class="inside">header</div>
	</header>
	<div id="container">
	<main id="main">
	<div class="inside">main</div>
	</main>
	<!--
	<aside id="left">
	<div class="inside">left</div>
	</aside>
	-->
	<aside id="right">
	<div class="inside">right</div>
	</aside>
	</div>
	<footer id="footer">
	<div class="inside">footer</div>
	</footer>
	</div>
	</body>
	</html>