* {
	padding: 0;
	margin: 0;
	}

html.open .hide-when-open {display: none;}

body {font: normal 16pt arial;}

main {
	height: 100dvh;
	background: #333;
	color: #CCC;

	display: grid;
	place-content: center;

	text-align: center;

	& .add-button {
		cursor: pointer;
		}

	& .prompt {margin-bottom: 15px;}
	& .subtext {font-size: 85%;}
	}

iframe {
	border: none;
	margin: none;
	width: 100%;
	height: 100%;
	position: fixed;
	/* or? */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

.warnings {
	margin-top: 25px;

	display: flex;
	justify-content: center;
	gap: 25px;
	flex-wrap: wrap;

	& .item {
		display: flex;
		align-items: center;
		gap: 5px;
		}

	& svg {width: 32px;}

	}

.hide {display: none;}

.attr:not(.no-service-worker) .hide-if-not-no-service-worker {display: none;}
.attr:not(.app-ready) .hide-if-not-app-ready {display: none;}
.attr.app-ready .hide-when-app-ready {display: none;}