/* -------------------------------------------------------------------------
NOTE: A CSS pixel is not a display pixel!
96px = 1 inch = 2,54 cm on the target device
*/

html
{
	width: 100%; height: 100%;
	overscroll-behavior: none; /* prevents page refresh when overscrolling down */
	
	* { box-sizing: border-box }

	body
	{
		width: 100%; height: 100%;
		margin: 0; padding: 0;
		font-family: Calibri, sans-serif;
		user-select: none; /* prevent text selection in general */
		-webkit-user-select: none; /* Safari iOS */
		
		span { white-space: nowrap }

		.Blink { animation: blinker 1.5s step-start infinite }
		@keyframes blinker { 50% { opacity: 0 }	}
		
		/* the app's main window */
		
		main
		{
			width: 100%; height: 100%;
			display: flex;
			flex-direction: row;

			/* default flex layout */
			
			&>*
			{
				width: 100%; height: 100%;
				flex: 1 1 auto;
				
				display: flex;
				flex-direction: column;
				
				&>*
				{
					width: 100%; height: 100%;
					flex: 1 1 auto;
				}
			}
			
			/* Style of map and menu overlay elements (button, output). Some are read by
			Javascript code, so take care when modifying. */

			--background-color: rgba(230, 230, 230, 0.9);
			--border-color: #808080;
			--border-width: 2px;
			--icon-size: 32px;
			--button-size: 48px;
			--gap: 10px;
			
			button
			{
				width: var(--button-size);
				height: var(--button-size);
				padding: calc((var(--button-size) - var(--icon-size) - 2 * var(--border-width)) / 2); /* to center the icon exactly */
				margin: 0;
				border: var(--border-width) solid var(--border-color);
				border-radius: 10px;
				background-color: var(--background-color);

				&.Off { filter: saturate(0) }
			}
		}
	}
}