@font-face {
	font-family: 'Atkinson';
	src: url('font/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
}

html, body {
	overflow-x: hidden;
}

body {
	position: relative;
}

* {
	font-family: "Atkinson", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*** watchface ***/

#clock {
	width: 200px;
	height: 200px;

	margin-top: 50px;
	border-radius: 1000px;
	border: 2px solid black;
	margin-left: auto;
	margin-right: auto;

	position: relative;

	touch-action: none;

	container-type: inline-size;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#clock,
#clock * {
	user-select: none;
}

#hour {
	width: 4%;
	height: 25%;
	background-color: black;
	position: absolute;
	border-radius: 20px;
	top: 25%;
	left: 48%;
	transform-origin: bottom center;
	transform: rotate(90deg);

	pointer-events: none;

	z-index: 100;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#minute {
	width: 2%;
	height: 40%;
	background-color: black;
	position: absolute;
	border-radius: 20px;
	top: 10%;
	left: 49%;
	transform-origin: bottom center;
	transform: rotate(90deg);

	pointer-events: none;

	z-index: 100;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#second {
	width: 0.4%;
	height: 50%;
	background-color: black;
	position: absolute;
	border-radius: 0;
	top: 0;
	left: 49.8%;
	transform-origin: bottom center;
	transform: rotate(90deg);

	pointer-events: none;

	z-index: 100;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#minute::after {
	content: '';
	width: 300%;
	height: 15%;
	border-radius: 100px;
	background-color: black;
	position: absolute;
	top: 0;
	left: -100%;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#center {
	width: 10%;
	height: 10%;
	background-color: black;
	position: absolute;
	border-radius: 200px;
	top: 45%;
	left: 45%;
	pointer-events: none;

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#swiss {
	position: absolute;
	left: 43%;
	top: 20%;
	width: 14%;
	height: 14%;
	border-radius: 30%;
	background-color: #DA291C;

	box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.3);
}

#horizontal {
	position: absolute;
	left: 14%;
	top: 40%;
	width: 72%;
	height: 20%;
	background-color: white;
}

#vertical {
	position: absolute;
	top: 14%;
	left: 40%;
	height: 72%;
	width: 20%;
	background-color: white;
}

.hourtick {
	box-sizing: border-box;

	width: 10%;
	height: 50%;
	background-color: transparent;
	position: absolute;
	border-radius: 20px;
	top: 0;
	left: 45%;
	transform-origin: bottom center;
	text-align: center;
	white-space: nowrap;
	padding-top: 5%;

	font-size: 8cqw;
}

.hourtick::after {
	content: '';
	width: 6%;
	height: 10%;
	background-color: black;
	position: absolute;
	top: 0;
	left: 47%;
}

/*** time input fields ***/

#time {
	margin-top: 20px;
	margin-bottom: 10px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#time input {
	width: 2em;
	text-align: center;
	border: 1px solid black;
}

#time,
#time * {
	font-size: 25px;
}

#time input {
	border-width: 2px;
	margin: 0 5px;
}

.up, .down {
	cursor: pointer;
	padding: 10px;
	margin: -10px;
	user-select: none;
}

#textTime {
	text-align: center;
	margin-top: 5px;

	container-type: inline-size;

	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}

#textTime p {
	font-size: calc(min(8cqw, 30px));
}