/*  =========================================================================
	 ADD FLAVOUR TO VANILLA CSS
	========================================================================= */

	* { margin: 0; padding: 0; box-sizing: border-box; }

	* { -webkit-tap-highlight-color: transparent; }

	body
	{
		font-family: "Helvetica", "Roboto", "Droid Sans", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Arial", system-ui, -apple-system, BlinkMacSystemFont, Sans-serif;
		font-size: 24px;
		letter-spacing: -1.25px;
	}

	textarea:focus, input:focus {
    	outline: none;
	}

/*  =========================================================================
	 Z-INDEX PRIORITIES
	========================================================================= */

	* { z-index: 10; }

		body { z-index: 1; }
		main { z-index: 7; }
		#background canvas { z-index: 8; }
		#title { z-index: 11; }
		#square { z-index: 9; }

/*  =========================================================================
	 BODY
	========================================================================= */

	/*  ----------------------------------------
		 MAIN
		---------------------------------------- */

	body
	{
		user-select: none;
	}

	main
	{
		display: flex;
		flex-direction: column;

		background-color: white;
		width: 100vw;
		height: 100vh;
	}

	/*  ----------------------------------------
		 CANVAS FRAME
		---------------------------------------- */

	#background canvas
	{ margin: 20px; }

		#frame-1, #frame-2, #frame-3, #frame-4 {
			position: fixed;
			border-radius: 4px;
		}

		#frame-1 {
			top:0; left:0;
			box-shadow: -2px -2px 2px darkgray;
		}

		#frame-2 {
			top:0; right:0;
			box-shadow: 2px -2px 2px darkgray;
		}

		#frame-3 {
			bottom:0; right:0;
			box-shadow: 2px 2px 2px darkgray;
		}

		#frame-4 {
			bottom:0; left:0;
			box-shadow: -2px 2px 2px darkgray;
		}

/*  =========================================================================
	 SQUARE (surface at the middle of the interface)
	========================================================================= */

	#square
	{
		/* INTERNAL DISPLAY */
		display: flex;
		flex-direction: column;
		margin: auto;
		text-align: center;
		overflow: hidden;
		padding: 5px;
		/* THEME */
		background: rgb(131,58,180); /* for old browsers compatibility */
		background: linear-gradient(45deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); /* https://cssgradient.io/ */
		color: white;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
		/* SHAPE */
		width: 700px; height: 400px; /* usefull only if app failure */
		border-radius: 4px;

		position: relative;
	}

		#graduations, #graduations-inch
		{
			position: absolute;
			top:0; left: 0;
			margin: 0; padding: 0;
			width: 20000px;
			height: auto;
			/*height: 30px;*/

			display: block;

			filter: invert(100%);

			background-color: transparent;
		}

		#graduations-portrait, #graduations-portrait-inch
		{
			position: absolute;
			top: 0; left: 0;
			margin: 0; padding: 0;
			height: 20000px;
			/*height: 30px;*/

			display: block;

			filter: invert(100%);

			background-color: transparent;
		}

		/* FORCE CONTENT TO BE FLEX */
		#square *, #square * * {
			display: flex;
			flex-direction: column;
			margin: auto;
		}

		/* MAIN CONTENTS TYPES */
		#square h1
		{
			font-size: 20px;
			font-weight: normal;
			letter-spacing: -.9px;

			max-width: 300px;

			margin-bottom: 10px;
		}

			#square h1:last-child {
				margin-bottom: 0px;
			}

		#square p
		{
			margin-bottom: 10px;

			font-size: 16px;
			font-weight: normal;
			letter-spacing: -.75px;

			max-width: 300px;

			display: inline-block;
			flex-direction: row;
		}

			#square p *, #square p * *
			{ display: inline-block; }

			#square p:last-child {
				margin-bottom: 0px;
			}

		#square button,
		#square input
		{
			display: inline-block;
			text-align: center;
			width: 40px;
			margin-left: 2px;
		}

		/* HIDE CALIBRATION TOOLS AT APP LAUNCH */
		#calibrationTools, #userPreferences
		{ display: none; }

			#calibrationTools div
			{ margin: 10px; }

				#calibrationTools div > *
				{ margin-bottom: 10px; }

				#calibrationTools div > *:last-child
				{ margin-bottom: 0; }


			#userPreferences *
			{ max-width: 100% !important; }

			#userPreferences button
			{ width: 100%; }

			a.themeButton
			{
				display:inline-block;
				margin:10px !important;
				cursor: pointer;

				opacity: .6;

				transition: all .2s ease-out;
			}

				a.themeButton.selected {
					opacity: 1;
				}

				a.themeButton:hover
				{
					transform: scale(1.02);
					opacity: .9;
				}

				a.themeButton img
				{
					margin-bottom:10px !important;
				}

				a.themeButton span
				{
					display: inline-block;
					width: 60px;
				}


/*  =========================================================================
	 APP CORNERS
	========================================================================= */

	/*  ----------------------------------------
		 TITLE (top-left)
		---------------------------------------- */

		#title
		{
			position: fixed;
			top: 0; left: 0;

			margin: 38px; /* for old ios devices */
			margin: max(38px, 4%);

			overflow: visible;
		}

			#title h1, #title h1 a, #title h1 a:active
			{
				font-size: 52px;
				letter-spacing: -2.5px;
				text-transform: lowercase;
				/*max-width: 340px;*/
				width:400px;
				/* TEXT GRADIENT :; https://www.cssportal.com/css-text-gradient-generator/ */
				background: #833AB4;
				background: -webkit-linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
				background: -moz-linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
				background: linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

				#title h1 a, #title h1 a:visited
				{
					text-decoration: none;

					display: inline-block;
					transition: all .2s ease;
					transform-origin: top left;
				}

					#title h1 a:hover
					{
						transform: scale(1.02);
						opacity: .9;
					}

			#title h2
			{
				/* DECALAGE */
				padding-left: 20px;

				font-size: 24px;
				font-weight: normal;
				letter-spacing: -1.25px;
				text-transform: lowercase;
				color: black;
			}


	/*  ----------------------------------------
		 CREDITS (top-right)
		---------------------------------------- */

		#credits
		{
			position: fixed;
			top: 0; right: 0;

			margin: 38px; /* for old ios devices */
			margin: max(38px, 4%);

			color: darkgrey;
			text-align: right;
		}

			#credits h1
			{
				font-size: 24px;
				font-weight: normal;
				letter-spacing: -1.25px;
				padding-bottom: 10px;
			}

			#credits p
			{
				font-size: 16px;
				letter-spacing: -.75px;
			}

			#credits img
			{
				display: inline-block;
				height: 60px;
				vertical-align: middle;
				color: grey;

				padding-left: 6px;
			}

				.dark #credits img { filter: invert(100%); }

			#credits a
			{
				color: black;
				text-decoration: none;

				display: inline-block;
				transition: all .2s ease;
				transform: scale(1);
			}

				#credits h1 a
				{ font-weight: bold; }

				#credits a:hover
				{
					transform: scale(1.02);
					opacity: .8;
				}


	/*  ----------------------------------------
		 APP INPUTS (bottom-right)
		---------------------------------------- */

		/*  ---------------
			 SIZE INPUTS
			--------------- */

		#input-form
		{
			position: fixed;
			bottom: 0;
			right: 0;

			margin: 38px; /* for old ios devices */
			margin: max(38px, 4%);
		}

			#input-form form
			{
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}

				#input-form form input
				{
					width: 60px;
				}


		.full-input
		{
			padding: 3px;
			margin-top: 6px;
			width: 70px;

		}

			.full-input input {
				width: 60px;
				outline: none;
				border: none;
				display: block;
				font-size: 24px;
				letter-spacing: -1.25px;

				-webkit-appearance: none;
				-moz-appearance: textfield;

				color: gray;
				background-color: transparent;

				display: inline-block;
				transition: all .2s ease;
			}

				/* Webkit fix to prevent arrows with input number : does not work; */
				.full-input input::-webkit-outer-spin-button,
				.full-input input::-webkit-inner-spin-button
				{
					-webkit-appearance: none;
					margin: 0;
				}

				.full-input input::placeholder {
					color: darkgray;
				}

				.full-input input:hover, .full-input input:focus
				{
					transform: scale(.98);
					opacity: .8;
				}

					.full-input input:disabled:hover
					{
						transform: scale(1);
						opacity: 1;
					}

			.full-input label {
				text-align: left;
				display: block;
				font-size: 16px;
				letter-spacing: -.75px;
				color: gray;
			}

	#fullscreen-button, #app-settings-button {
		display: inline-block;
		margin: 2px;

		transform: scale(1);
		transition: all .2s ease;
		cursor: pointer;
	}

	#fullscreen-button:hover, #app-settings-button:hover
	{
		transform: scale(1.02);
		opacity: .8;
	}

		/*#app-settings-button:hover img
		{ transform: rotate(90deg); }*/

	#fullscreen-button img, #app-settings-button img {
		width: 30px;
		height: 30px;
	}




		/*  ---------------
			 CALIBRATION ZOOM BUTTONS
			--------------- */

		#calibration-zoom
		{
			position: fixed;
			bottom: 48px;
			right: 48px;

			display: none; /* flex  when displayed */
			flex-direction: column;
			text-align: center;
		}

			#calibration-zoom button
			{
				font-size: 40px;
				width: 80px;
				height: 80px;

				flex-direction: column;
				text-align: center;
				margin: auto;
			}


	/*  ----------------------------------------
		 CALIBRATION ZONE (bottom-left)
		---------------------------------------- */

		#device-info
		{
			position: fixed;
			bottom: 0;
			left: 0;

			margin: 38px; /* for old ios devices */
			margin: max(38px, 4%);
		}

			#device-info h1
			{
				font-size: 24px;
				letter-spacing: -1.25px;
				color: grey;
			}

			#device-info div
			{
				font-size: 16px;
				letter-spacing: -.75px;
				color: darkgrey;
			}

			#device-info #calibrationBox
			{
				position: relative;

				height: 80px;
				width: 300px;
			}

				#calibrationBox #calibrationIcon
				{
					position: absolute;
					top: 0px;
					left: 0px;
					width: 80px;
					height: 80px;

					padding: 15px;
				}

					/* white background for dark mode */
					#calibrationBox #calibrationIcon img
					{
						border-radius: 40px;
						background-color: white;
					}

				#calibrationBox #calibrationStatus
				{
					position: absolute;
					top: 0px;
					left: 80px;
					min-width: 220px;
					height: 40px;

					font-size: 24px;
					letter-spacing: -1.25px;
					padding-top: 16px;

					color: grey;
				}

				#calibrationBox #calibrationButtons
				{
					position: absolute;
					top: 40px;
					left: 80px;
					width: 220px;
					height: 40px;

					padding-top: 5px;
					padding-left: 5px;
				}

				#calibrationBox #calibrationButtons button
				{
					background-color: transparent;
					border: .05px darkgray solid;
					border-style: none none none solid;
					padding: 2px;
					padding-left: 5px;

					font-size: 14px;
					letter-spacing: -.75px;
					color: gray;


					cursor: pointer;

					transition: all .2s ease;
				}

				#calibrationBox #calibrationButtons button:hover
				{
					transform: scale(.98);
					opacity: .8;
				}


/*  =========================================================================
	 AUTO-SCALING (RESPONSIVE)
	========================================================================= */

	#frame-1, #frame-2, #frame-3, #frame-4, #credits, #title h2, #input-form, #calibration-zoom, #device-info, #calibrationIcon, #calibrationButtons {
		transition: all .4s ease-out;
	}

		/* LIMITED ANIMATIONS */
		@media (prefers-reduced-motion: reduce)
		{
			* { transition: all .4s ease-out !important; }
		}

	/*  ----------------------------------------
		 LG
		---------------------------------------- */

	#frame-1, #frame-2, #frame-3, #frame-4 {
		transform: scale(.8);
	}

		#frame-1 { transform-origin: top left; }
		#frame-2 { transform-origin: top right; }
		#frame-3, #calibration-zoom, #input-form
		{ transform-origin: bottom right; }
		#frame-4, #device-info, #calibrationIcon, #calibrationButtons
		{ transform-origin: bottom left; }

	/*  ----------------------------------------
		 MD
		---------------------------------------- */

	@media (max-width: 1200px), (max-height: 900px) {
		#frame-1, #frame-2, #frame-3, #frame-4
		{ transform: scale(.65); }
	}

	/*  ----------------------------------------
		 SM
		---------------------------------------- */

	@media (max-width: 992px), (max-height: 700px) {
		#frame-1, #frame-2, #frame-3, #frame-4
		{ transform: scale(.5); }

		#input-form, #calibration-zoom
		{ transform: scale(1.1); }

		#device-info
		{ transform: scale(.95); }

		#calibrationIcon, #calibrationButtons
		{ transform: scale(1.05); }
	}

	/*  ----------------------------------------
		 XS
		---------------------------------------- */

	@media (max-width: 768px), (max-height: 500px) {
		#frame-1, #frame-2, #frame-3, #frame-4
		{ transform: scale(.35); }

		#credits, #title h2
		{ opacity: 0; }

		#input-form, #calibration-zoom
		{ transform: scale(1.2); }

		#device-info
		{ transform: scale(.9); }

		#calibrationIcon, #calibrationButtons
		{ transform: scale(1.1); }
	}

/*  =========================================================================
	 AUTO-SCALING (RESPONSIVE)
	========================================================================= */

	.dark canvas { opacity: .35; }

	.dark main { background-color: black; }
	.dark #title h2 { color: gainsboro; }
	.dark #credits { color: gainsboro; }
	.dark #credits img { color: white; }
	.dark #credits a { color: white; }

	.dark .full-input input { color: white; }
		.dark .full-input input::placeholder { color: white !important; opacity: .5; }
		.dark .full-input input:hover::placeholder { opacity: 1; }
	.dark .full-input label { color: gainsboro; }

	.dark #fullscreen-button img, .dark #app-settings-button img { filter: invert(100%); }

	.dark #device-info h1 { color: white; }
	.dark #device-info div { color: gainsboro; }

	.dark #calibrationBox #calibrationStatus { color: white; }
	.dark #calibrationBox #calibrationButtons button { color: gainsboro; }