:root {
			touch-action: pan-x pan-y;
			height: 100%;
		}

		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			font-family: Arial, Helvetica, sans-serif;
			display: flex;
			flex-direction: column;
			background-color: #808080; /* middle gray */
		}
		
		.viewport-wrapper 
		{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			/* background: black; */
		}

		.phone-viewport 
		{
			aspect-ratio: 9 / 16;
			height: 100%;
			max-height: 100%;
			width: auto;
			overflow: hidden;
			box-shadow: 0 0 40px rgba(0,0,0,0.6);
			/* background: white; */
		}
		
		.h1 
		{
			font-size: 15vw; /* 20% of viewport width */
			line-height: 1;
			font-family: "Anton", sans-serif;
			color: white;
			text-align: center;
		}
		
		.h2
		{
			font-size: 10vw; /* 20% of viewport width */
			line-height: 1;
			font-family: "Anton", sans-serif;
			color: white;
			text-align: center;
		}

		/* Main content area */
		main {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Large centered waiting text */
		#waitingText {
			font-size: 60px;
			font-weight: bold;
			color: white;
			text-align: center;
		}

		/* Footer message area */
		footer {
			background-color: #f0f0f0;
			text-align: center;
			padding: 15px;
			border-top: 1px solid #ccc;
			font-style: italic;
			color: #555;
			font-size: 24px;
		}
	
		.Button {
			margin-top: 100px;
			padding: 10px 20px;
			width: 800px;
			height: 300px;
			font-size: 100px;
			border: none;
			border-radius: 5px;
			background-color: #333;
			color: white;
			cursor: pointer;
		}