/* Page
*/

html {
	margin:0px;
	padding:0px;

	body {
		margin:0px;
		padding:0px;
	}
	scrollbar-width: none;

	font-family: sans-serif;
}

/* Clock
*/

svg#clock {
	width: 90vw;
	height: 90vh;
	padding: 5vh 5vw;
}

output { display:block; }


/* Settings form
*/

form#form-clock {

	display: grid;
	position:absolute;
	right:0ex;
	border:1px solid silver;
	background-color:#eee9;
	border-radius: 1ex;
	padding:1ex;
	margin: 1ex;
	width: 12em;

	h2 {
		margin-top: 0em;
		margin-bottom: 1ex;
	}
	details {
		margin-top:1ex;
	}

	.controls {
		margin:1ex 0ex;

		button {
			font-family: monospace;
			font-weight:bold;
			width:2em;
			height:2em;
			padding:0em;
		}
	}
}

/* @media (orientation: landscape) { */
@media (min-aspect-ratio: 1.2) {

	form#form-clock {
		grid-template-columns: 1fr ;
		label { margin-top: 0.2em; }
	}
}

/* @media (orientation: portrait) { */
@media (max-aspect-ratio: 1.2) {
	form#form-clock {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		label { text-align:right; margin-right:1ex; }
		label::after { content:": "; }
		h2, details, .controls { display:none; }
		width: auto;
		left:0ex;
		right:0ex;
	}
}

@media (max-width: 800px) {
	form#form-clock {
		grid-template-columns: 1fr 1fr 1fr;
		label { display: none; }
		h2, details, .controls { display:none; }
		width: auto;
		left:0ex;
		right:0ex;
	}
}

:invalid {background-color:pink;}


/* Testing
*/
.testResult { display:none; }

.testing {
	.testResult {
		display: grid;
		position:absolute;
		right:0ex;
		bottom: 0ex;
		border:1px solid red;
		background-color: pink;
		border-radius: 1ex;
		padding:1ex;
		margin: 1ex;
	}

	.testPass {
		outline:1ex dashed green;
		outline-offset: -1ex;
	}

	.testFail {
		outline:1ex dashed red;
		outline-offset: -1ex;
	}
}