/* 
Thank you, Roman
https://codepen.io/kizu/pen/OJdzpmB
*/


@font-face {
	font-family: "Kosmik";
	src: url("../fonts/LTRKosmik-Regular.woff2");
	font-style: normal;
	font-stretch: normal;
	font-weight: normal;
}

@font-face {
	font-family: "Kosmik";
	src: url("../fonts/LTRKosmik-Bold.woff2");
	font-style: normal;
	font-stretch: normal;
	font-weight: bold;
}

:root {
	--div-width: 42;
	--bg: white;
	--fg: black;
	--border-width: .4; 
}
@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
	}
}

body {
  display: grid;
  margin: 0;
  min-height: 100vh;
  place-items: center;
  font-family: "Kosmik", sans-serif;
  font-feature-settings: "ss03";
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
}

div:not([style]) {
  visibility: hidden;
}

div {
  grid-area: 1 / 1;
  z-index: 2;
  width: calc( var(--div-width) * 1vmin );
  border-radius: 0;
  padding: calc( var(--border-width) * 1vmin );
  background: currentcolor;
  height: 1em;
  box-sizing: border-box;
  border: 1px solid var(--fg);
  transform-origin: 0.5em 0.5em;
  transform: 
	translateX(calc(50% - 0.5em))
	rotate(calc(360deg * var(--progress) - 90deg))
	;
	transition: transform .5s;
}
div[value="0"] {
	transition: none;
}


#hours {
  font-size: 2.82714594vmin;
  width: calc( var(--div-width) / 1.414 * 1vmin );
}

#minutes {
  font-size: 1.999396vmin;
  width: calc( var(--div-width) * 1vmin - 1px );
}

#minuteIndicators {
	
}

ol {
	grid-area: 1 / 1;
	width: calc( var(--div-width) * 2vmin );
	aspect-ratio: 1;
	
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
}
li {
	font-size: 1.999396vmin;
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	width: 1em;
	height: 1em;
	border: calc( var(--border-width) * 1vmin ) solid;
	background: red;
	box-sizing: border-box;
	transform: 
		rotate( calc(var(--index) * 6deg ) )
		translateY( calc( var(--div-width) * -1vmin ) );
}
#minuteIndicators li {
	z-index: 3;
}
#minuteIndicators li:nth-of-type(5n) {
	list-style: none;
	transform: 
		rotate( calc(var(--index) * 6deg ) )
		translateY( calc( var(--div-width) * -1vmin ) )
		rotate( calc(var(--index) * -6deg - var(--hour) * 30deg ) );
	background: none;
	font-size: 20vmin;
	text-align: center;
	line-height: 1;
	border: calc( var(--border-width) * 4vmin ) solid;
	border-width: 0 0 calc( var(--border-width) * 18vmin );
	border: 0;
	z-index: -1;
	width: 200vw;
	position: absolute;
	background: hsl( calc( var(--index) * 6 ), 80%, 60% );
	mix-blend-mode: multiply;
}
#minuteIndicators li:nth-of-type(5n)::before {
	content: '';
	font-size: 1.999396vmin;
	margin: 0;
	padding: 0;
	width: 1em;
	height: 1em;
	border: calc( var(--border-width) * 1vmin ) solid;
	outline: 1px solid var(--bg);
	background: var(--fg);
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: 
		translate(-50%, -50%)
		rotate( calc(var(--index) * 6deg - var(--hour) * -30deg ) );
}
@counter-style minutes {
  system: cyclic;
  symbols: " ";
  range: 1 2;
  suffix: " ";
}

#minuteIndicators {
	rotate: calc( var(--hour) * 30deg );
	transition: .5s;
}

#hourIndicators {
	transform: scale(90%);
	font-feature-settings: "ss02";
	font-weight: bold;
	z-index: 0;
}
#hourIndicators li {
	transform: 
		rotate( calc(var(--index) * 30deg ) )
		translateY( calc( var(--div-width) / 1.414 * -1vmin ) )
		rotate( calc(var(--index) * -30deg ) );
	list-style: none;
	border: calc( var(--border-width) * 2vmin ) solid;
	background: none;
	font-size: 4.242vmin;
	padding: .1em;
	box-sizing: content-box;
	text-align: center;
	z-index: -1;
}
@counter-style hours {
  system: cyclic;
  symbols: " ";
  range: 13 14;
  suffix: " ";
}