:root {

	--height-header: 80px;
	--height-footer: 70px;

}

	/* Checking elements positions */
	*,
	*::before,
	*::after {
		/* outline: 2px solid #ccc;	*/
	}

	body, html {
		/* Pull-to-refresh disabled */
		overscroll-behavior: none;
	}

	body {

		/* padding: 80px 0 72px; */
		/* padding-top: env(safe-area-inset-top, 20px); */

		.info-display-mode::after {
			content: var(--info-display-mode);
		}
		.info-user-select::after {
			content: var(--info-user-select);
		}
			.info-user-select-state::after {
				content: "none";
			}
			.user-select {
				-webkit-user-select: none; /* Safari */
				user-select: none;
			}

	}

	header, footer {
		position: fixed;
		/* position: sticky; */
	}

	header {
		top: 0;
		/*
		padding-top: env(safe-area-inset-top, 20px);
		padding-top: max(20px, safe-area-inset-top);
		*/
		/*
		padding-top: env(titlebar-area-height);
		top: env(titlebar-area-y);
		*/
		width: 100%;
		& nav {
			padding-top: env(safe-area-inset-top, 20px)
		}
	}

	main {}

	footer {
		bottom: 0;
		/*
		top: env(titlebar-area-y);
		*/
		width: 100%;
	}

	/* App used within the browser */
	@media (display-mode: browser) {

		:root {

			--info-display-mode: "browser";
			--info-user-select: "auto";

		}

	}

	/* App used with a system icon in standalone mode */
	@media (display-mode: standalone) {

		:root {

			--info-display-mode: "standalone";
			--info-user-select: "none";

			}

		body {

			-webkit-user-select: none; /* Safari */
			user-select: none;
			.info-user-select-state::after {
				content: "text";
			}
			.user-select {
				-webkit-user-select: text; /* Safari */
				user-select: text;
			}

		}

	}

	/* App used with a system icon in all mode */
	@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {}