/** default global layout used across all webpages.
 * the "mobile" and "desktop" containers simplify declaring mobile and desktop layouts,
 * without having to use media queries.
 */

@import url("../modern-normalize.css");
@import url("../themes/theme.css");

/* this is for the sake of centering the page. */
html {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

body {
	container-type: inline-size;
	container-name: desktop;
	position: relative;
	width: 100vw;
	max-width: var(--page-width);
}

@media screen and (max-width: 768px) and (orientation: portrait), screen and (max-width: 650px) {
	html {
		--page-width: 100vw;
		--page-margin-lr: 0.25rem;
	}

	body {
		container-name: mobile;
	}
}

@page {
	size: var(--page-print-size);
	margin: var(--page-margin-tb) var(--page-margin-lr);
}

main {
	position: relative;
	max-width: 100%;
	padding: 0.0in var(--page-margin-lr);

	@container mobile (min-width: 0) {
		overflow-x: clip;
	}

	@media print {
		padding: 0 !important;
	}
}

.mobile-only {
	/* container and media queries always require a conditional statement,
	 * which is why we use the "always-true" condition `min-width: 0` on the container.
	 */
	@container desktop (min-width: 0) {
		display: none !important;
	}
}

.desktop-only {
	@container mobile (min-width: 0) {
		display: none !important;
	}
}

.no-print,
.no-print * {
	@media print {
		display: none !important;
		position: absolute !important;
	}
}

.page-break {
	break-after: page;
}