/* 
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;
}

:root {
	--div-width: 42;
	--bg: white;
	--fg: black;
}
@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);
}

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

div {
  grid-area: 1 / 1;
  width: calc( var(--div-width) * 1vmin );
  height: 1em;
  box-sizing: border-box;
  transform-origin: 0.5em 0.5em;
  transform: 
	translateX(calc(50% - 0.5em))
	rotate(calc(360deg * var(--progress) - 90deg))
	;
	transition: transform .5s;
display: grid;
	
	justify-content: end;
}
[data-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 );
}
#seconds {
  font-size: 1.414vmin;
  width: calc( var(--div-width) * 1vmin );
}

div::after {
	content: '🐜';
	rotate: -.25turn;
}