@font-face {
  font-family: "GT Standard";
  src:
	url("gt-standard.woff2") format("woff");
}

@font-face {
  font-family: "GT Standard Mono";
  src:
	url("gt-standard-mono.woff2") format("woff");
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

:root {
	--font-wght: 800;
	--font-wdth: 100;
	--font-opsz: 30;
	--font-slnt: calc(var(--x)*6);
	--gap: 1rem;
	--x: 0.5;
	--y: 0.5;
	--color: #000;
	--skew: 0deg;
}

.data {
	position: fixed;
	width: 20em;
	font-family: monospace;
	top: var(--gap);
	right: var(--gap);
	pointer-events: none;
}

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	max-height: 100dvh;
	max-width: 100dvw;
	font-family: "GT Standard";
	color: var(--color);
}

p {
	font-size: 2vw;
	position: absolute;
	left: var(--gap);
	top: var(--gap);
	margin: 0;
	padding: 0;
	line-height: 1.1;
	pointer-events: none;
	font-variation-settings: "slnt" var(--font-slnt);
	transform: skew(var(--skew));

}

.container {
	position: relative;
	margin: 0;
	width: 100dvw;
	height: 100dvh;
	overlay: hidden;
}

h1 {
	pointer-events: none;
	left: var(--gap);
	bottom: var(--gap);
	letter-spacing: -0.03em;
	font-size: 20vw;
	position: absolute;
	font-variation-settings: "wght" var(--font-wght),"wdth" var(--font-wdth),"opsz" var(--font-opsz),"slnt" var(--font-slnt);
	line-height: 0.85;
	margin: 0;
	padding: 0;
	transform: skew(var(--skew));
}

.tracker-container, .tracker {
	position: absolute;
}


#ball {
	width: 4em;
	height: 4em;
	border-radius: 100%;
	background: var(--color);
	position: absolute;
}

@media (max-width: 600px) {
  h1 {
	  font-size: 33dvw;
  }
  .data {
	  width: 100%;
	  font-family: monospace;
	  right: unset;
	  top: 35vw;
	  left: var(--gap);
  }
  p {
  	font-size: 6vw;
  }
}