/**/
/*
html, body {
  background: rgb(87, 79, 129);
  color: hsla(0, 0%, 85%, 0.25);
}

html {
  height: 100%;
  display: flex;
}

body {
  width: 100%;
  overflow: hidden;
}

.test {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: fit-content;
  height: fit-content;
  overflow: visible;
  padding-left: 1em;
  padding-right: 1em;
  overflow: hidden
}
*/
/**/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Rubik:wght@400;600&display=swap");

.numberInput {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 9em;
  height: 9em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  font-size: 4vmin;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.1em;
  perspective: 550px;
}

.numberInput, .numberInput * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.numberInput:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));*/
  transform: translateZ(5em);
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.numberInput.noPointerEvents::before {
  pointer-events: none;
}

.numberInput:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to top, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.76));*/
  transform: translateZ(1.5em);
  box-sizing: border-box;
  transform-style: preserve-3d;
}

/*STOP*/
.colon {
  position: relative;
  display: inline-block;
  opacity: 1;
  width: 1ch;
  margin: 0;
  text-align: center;
}

.cog {
  position: relative;
  width: 1ch;
  height: 2ch; 
  margin: -0.9ch 0.1ch 0;
  display: inline-block;
}

.cog .word, .cog .char {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1ch;
  height: 2ch;
  transition: color 0.3s ease-in-out;
}

.cog .char {
  border-radius: 0.1em;
  transform: rotateX(calc((360deg*var(--char-percent)))) translateZ(calc(1.2*3.14em)); /* This sets the diamater and the rotation of the characters, translateZ(calc(1.2*3.14em)*/
}

/*
.char {
  color: transparent !important;
  background-size: cover;
}
*/