div.content {
	/*display: flex;*/
	/*flex-direction: column;*/
	/*align-items: center;*/
	/*justify-content: center;*/
	/*width: 100%;*/
	/*gap: 1rem;*/
	/*height: 100%;*/
}

div.app {
	display: grid;
	max-width: 70dvw;
	grid-template-columns: auto 1fr;
	grid-template-rows: 80dvh auto;
	grid-template-areas:
		"sidebar main"
		"sidebar disclaimer"
		"footer footer"
	;
	gap: 2rem;

	div.sidebar {
		grid-area: sidebar;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		flex-grow: 0;
		height: min-content;

		margin-top: 4rem;

		clip-path: polygon(0 0, 100% 2rem, 100% 100%, 0 calc(100% - 2rem));
		padding: 3em 0 0;
		/*background-color: white;*/
		background-color: var(--content-bg);


		nav {
			/*margin: 3rem 0;*/
			background-color: #003366;
			clip-path: polygon(0 0, 100% 2rem, 100% 100%, 0 calc(100% - 2rem));
			padding: 2rem 0 2.5rem;

			color: white;
			text-decoration: none;

			ul {
				list-style: none;
				padding: 0;
				/*margin: 0;*/
				text-align: center;
				li {
					margin: 0.25rem 0;

					&:hover {
						background-color: #FFFFFF30;
						cursor: pointer;
					}
				}
			}

			a, a:hover, a:active, a:focus, a:visited {
				color: white;
				text-decoration: none;
				font-size: 1.2rem;
			}
		}
	}

	h1.title, div.page {
		grid-area: main;
		/*background-color: #FFFFFFB0;*/
		background-color: color-mix(in srgb, var(--content-bg), transparent var(--opacity));
		margin-top: 4rem;
		padding: 2rem;
		h2 {
			text-align: center;
		}
	}

	footer { grid-area: footer;	color: #003366;}
	div.disclaimer { grid-area: disclaimer; color: #003366; background-color: color-mix(in srgb, var(--content-bg), transparent var(--opacity)); padding: 1rem; }

	div.logo {
		padding: 0.5rem;
	}
}

h1, h32, p {
	text-align: center;
	margin-block: 0;
}

div.previewer {
	background-color: #003366;
	color: white;
	width: 100dvw;
}

body {
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	/*font-family: 'Roboto', sans-serif;*/
	color: #003366;
	/*background-color: #d77933;*/
	display: grid;
	grid-template-columns: 100dvw;
	grid-template-rows: min-content 1fr;
	place-items: center;
	height: 100dvh;
	width: 100dvw;
	overflow-x: hidden;
	margin: 0;
	/*display: flex;*/
	/*flex-direction: column;*/
	/*background-color: red;*/
}

body:before {
	content: "";
    width: 100dvw;
    height: 100dvh;
	position: fixed;
	z-index: -1;
}

body.light {
	--content-bg: #f1f1f1;
}

body.dark {
	--content-bg: #adadad;
}

body.light_diagonal {
	&:before {
		background-image: repeating-linear-gradient(45deg, rgba(255, 140, 0, 0.12) 0, rgba(255, 140, 0, 0.12) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(-45deg, rgba(255, 69, 0, 0.08) 0, rgba(255, 69, 0, 0.08) 1px, transparent 1px, transparent 22px);
		background-size: 44px 44px;
	}
	&.transparent {
		--opacity: 10%;
	}
}

body.dark_diagonal {
	&:before {
		background-color: #0f0f0f;
		background-image: repeating-linear-gradient(45deg, rgba(255, 140, 0, 0.12) 0, rgba(255, 140, 0, 0.12) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(-45deg, rgba(255, 69, 0, 0.08) 0, rgba(255, 69, 0, 0.08) 1px, transparent 1px, transparent 22px);
		background-size: 44px 44px;
	}
	&.transparent {
		--opacity: 10%;
	}
}

body.light_glow_orange {
	&:before {
		background-color: white;
		background-image:
		radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%),
		radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%),
		radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%);
	}
	&.transparent {
		--opacity: 10%;
	}
}

body.dark_glow_orange {
	&:before {
		background-color: black;
		background-image:
		radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%),
		radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%),
		radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%);
	}
	&.transparent {
		--opacity: 10%;
	}
}

body.dark_peaks {
	&:before {
		background-image: url("/stacked-peaks-dark.svg");
		background-size: cover;
	}

	&.transparent {
		--opacity: 20%;
	}
}

body.light_peaks {
	&:before {
		background-image: url("/stacked-peaks-light.svg");
		background-size: cover;
	}

	&.transparent {
		--opacity: 20%;
	}
}

body.dark_hexagons {
	&:before {
		background-color: #1a1a1a;
		background-image: url("/gggyrate.svg");
		background-size: cover;
		background-position: 25% 50%;
	}

	&.transparent {
		--opacity: 3%;
	}
}

body.light_hexagons {
	&:before {
		background-image: url("/gggyrate.svg");
		background-size: cover;
		background-position: 25% 50%;
		transform: scaleX(-1) scaleY(-1);
	}
	&.transparent {
		--opacity: 3%;
	}
}

body.opaque {
	--opacity: 0%;
}