:root {
	/*Screen Size*/
	--desktop-landscape-layout-width: 1900;
	--desktop-landscape-layout-height: 1000;

	--desktop-portrait-layout-width: 1060;
	--desktop-portrait-layout-height: 1840;

	--mobile-portrait-layout-width: 360;
	--mobile-portrait-layout-height: 720;

	--desktop-layout-cut-off-multiplier: 0.7;
	--pixels-per-rem: 1;
}

/* Desktop landscape layout. */
@media (min-width: 1330px) { /* The value of --desktop-landscape-layout-width * --desktop-layout-cut-off-multiplier * 1px. */
	/* With and height of the layout in rems. You can reference back to these values if you need to size elements as a percent of the layout
	size. */
	:root {
		--layout-width: calc(var(--desktop-landscape-layout-width) * 1rem);
		--layout-height: calc(var(--desktop-landscape-layout-height) * 1rem);
	}

	/* The scaling. */
	@media (min-aspect-ratio: 1.9) { /* The value of --desktop-landscape-layout-width / --desktop-landscape-layout-height. */
		@media (min-height: 700px) { /* The value of --desktop-landscape-layout-height * --desktop-layout-cut-off-multiplier * 1px. */
			html {
				font-size: calc((100 / var(--desktop-landscape-layout-height)) * var(--pixels-per-rem) * 1vh);
			}
		}
		@media (max-height: 700px) { /* The value of --desktop-landscape-layout-height * --desktop-layout-cut-off-multiplier * 1px. */
			html {
				font-size: calc(var(--pixels-per-rem) * var(--desktop-layout-cut-off-multiplier) * 1px);
			}
		}
	}
	@media (max-aspect-ratio: 1.9) { /* The value of --desktop-landscape-layout-width / --desktop-landscape-layout-height. */
		html {
			font-size: calc((100 / var(--desktop-landscape-layout-width)) * var(--pixels-per-rem) * 1vw);
		}
	}
	
	/* The element styling based on rems. Take the dimensions in pixels from your design, divide them by the value of --pixels-per-rem
	and express them here in rem units. */
}

/* Desktop portrait layout. */
@media (min-width: 742px) and (max-width: 1330px) { /* The values of --desktop-portrait-layout-width and --desktop-landscape-layout-width * --desktop-layout-cut-off-multiplier * 1px. */
	/* With and height of the layout in rems. You can reference back to these values if you need to size elements as a percent of the layout
	size. */
	:root {
		--layout-width: calc(var(--desktop-portrait-layout-width) * 1rem);
		--layout-height: calc(var(--desktop-portrait-layout-height) * 1rem);
	}

	/* The scaling. */
	@media (min-aspect-ratio: 0.5761) { /* The value of --desktop-portrait-layout-width / --desktop-portrait-layout-height. */
		@media (min-height: 1288px) { /* The value of --desktop-portrait-layout-height * --desktop-layout-cut-off-multiplier * 1px. */
			html {
				font-size: calc((100 / var(--desktop-portrait-layout-height)) * var(--pixels-per-rem) * 1vh);
			}
		}
		@media (max-height: 1288px) { /* The value of --desktop-portrait-layout-height * --desktop-layout-cut-off-multiplier * 1px. */
			html {
				font-size: calc(var(--pixels-per-rem) * var(--desktop-layout-cut-off-multiplier) * 1px);
			}
		}
	}
	@media (max-aspect-ratio: 0.5761) { /* The value of --desktop-portrait-layout-width / --desktop-portrait-layout-height. */
		html {
			font-size: calc((100 / var(--desktop-portrait-layout-width)) * var(--pixels-per-rem) * 1vw);
		}
	}

	/* The element styling based on rems. Take the dimensions in pixels from your design, divide them by the value of --pixels-per-rem
	and express them here in rem units. */
}

/* Tablet layouts would go here. But we do not have a tablet layout because most tablets are big enough (and getting bigger) to run
the desktop layouts. For the case when a tablet in landscape mode would run the desktop portrait layout, it is my opinion that
creating a dedicated tablet landscape layout would incur exponential complexity and would not provide a significantly lesser interaction
degradation (there's always more clicking and scrolling that has to be done when working with less screen real estate) than the one
stemming from having to scroll up and down when viewing a cut off portrait layout. */

/* Mobile portrait layout. We do not implement a mobile landscape layout because we do not see value in it. */
@media (max-width: 742px) { /* The value of --mobile-portrait-layout-width * 1px. */
	/* With and height of the layout in rems. You can reference back to these values if you need to size elements as a percent of the layout
	size. */
	:root {
		--layout-width: calc(var(--mobile-portrait-layout-width) * 1rem);
		--layout-height: calc(var(--mobile-portrait-layout-height) * 1rem);
	}

	/* The scaling. */
	@media (min-aspect-ratio: 0.5) { /* The value of --mobile-portrait-layout-width / --mobile-portrait-layout-height. */
		html {
			font-size: calc((100 / var(--mobile-portrait-layout-height)) * var(--pixels-per-rem) * 1vh);
		}
		/* We are not going to worry about minimum scaling as, unlike desktops, zooming in mobile browsers does not change the 
		viewport size. So on mobile browsers one can actually zoom in into a webpage without triggering a layout update. */
	}
	@media (max-aspect-ratio: 0.5) { /* The value of --mobile-portrait-layout-width / --mobile-portrait-layout-height. */
		html {
			font-size: calc((100 / var(--mobile-portrait-layout-width)) * var(--pixels-per-rem) * 1vw);
		}
	}
}