:root {
  --bg-color: #fff;
  --text-color: #000;
  --body-font: 'Covik Sans Mono';
}
.threed {
  perspective: 1500px;
  transform-style: preserve-3d;
}

.spinning-text {
  font-family: var(--body-font);
  letter-spacing: 0.1em;
  color: var(--text-color);
  position: relative;
  font-size: calc(1080px / var(--char-total));
  width: 25%;
  padding-top: 10%;
  height: 0px;
  margin: auto;
  transform-style: preserve-3d;
  animation: spin 6s linear infinite;
  --speed: calc(0.6s * var(--char-total));
  animation-duration: var(--speed);
}

@keyframes spin {
  0% {
    transform: rotateY(45deg) rotateX(20deg) rotateY(360deg);
  }
  100% {
    transform: rotateY(45deg) rotateX(20deg) rotateY(0deg);
  }
}

.spinning-text .char {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  text-align: center;
  width: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  transform-style: preserve-3d;
  transform: rotateY(90deg) rotateY(calc(160deg * var(--distance-sine)))
    translateZ(calc(0.2em * var(--char-total)));
}

html,
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

svg#text-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

h1 {
  font-family: 'CoFo Peshka Variable V0.3 1000 Black';
  font-size: 100px;
  text-align: center;
  font-variation-settings: 'wght' 500, 'wdth' 500;
}

p {
  font-family: 'Covik Sans Mono';
  font-size: 22px;
  line-height: 1.4em;
}

canvas {
  border: 1px solid black;
}
.big-text {
  display: block;
  white-space: nowrap;
  font-family: var(--body-font);
  font-size: 19px;
  color: #faf9f4;
  margin: 0;
  z-index: 10;
}
.vert-text {
  display: block;
  white-space: nowrap;
  writing-mode: vertical-rl;
  font-family: var(--body-font);
  font-size: 19px;
  color: #faf9f4;
  margin: 0;
}
.text-left {
  transform: rotate(180deg) translateX(-3px);
}
.text-right {
  transform: translateX(5px);
}
.text-top {
  z-index: 11;
}
.text-bottom {
}

.centered {
  position: absolute;
}

.strip-top {
  left: 0%;
  top: 0%;
  z-index: 10;
}
.strip-bottom {
  left: 0%;
  top: calc(100% - 70px);
  z-index: 10;
}
.strip-left {
  left: 0%;
  top: 0%;
  z-index: 9;
}
.strip-right {
  left: calc(100% - 35px);
  top: 0%;
  z-index: 9;
}

.box {
  position: relative;
  background-color: #27262f;
  width: 100vw;
  height: 35px;
  overflow: hidden;
}
.box-tall {
  position: absolute;
  background-color: #27262f;
  width: 35px;
  height: 100vh;
  overflow: hidden;
}

.scroll-right {
  animation: animRight 20s linear infinite;
}
.scroll-left {
  animation: animLeft 20s linear infinite;
}
.scroll-up {
  animation: animUp 20s linear infinite;
}
.scroll-down {
  animation: animDown 20s linear infinite;
}

@keyframes animRight {
  0% {
    transform: translate(-50%, 3px);
  }
  100% {
    transform: translate(0%, 3px);
  }
}
@keyframes animLeft {
  0% {
    transform: translate(0%, 3px);
  }
  100% {
    transform: translate(-50%, 3px);
  }
}
@keyframes animUp {
  0% {
    transform: translate(0px, 0%) rotate(180deg);
  }
  100% {
    transform: translate(0px, -50%) rotate(180deg);
  }
}
@keyframes animDown {
  0% {
    transform: translate(6px, -50%);
  }
  100% {
    transform: translate(6px, 0%);
  }
}

#timer {
  font-family: 'CoFo Peshka Variable V0.3 1000 Black';
  font-size: 100px;
  text-align: center;
  font-variation-settings: 'wght' 700, 'wdth' 800;
  color: #faf9f4;
  z-index: 50;
  line-height: 1;
}

.project-name {
  font-family: var(--body-font);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--text-color);
  min-height: 1.4em;
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 50;
}

.volume-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

#mute {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-color);
  display: flex;
  align-items: center;
  opacity: 0.7;
}

#mute:hover {
  opacity: 1;
}

#volume {
  accent-color: var(--text-color);
  width: 120px;
}

.blink {
  animation: blink 1.2s infinite;
}
@keyframes blink {
  0% {
    color: #000;
  }
  49% {
    color: #000;
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: #000;
  }
}

#setup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 260px;
  z-index: 100;
}

#inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#inputs label {
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color);
  margin-top: 8px;
}

#inputs input {
  font-family: var(--body-font);
  font-size: 16px;
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

#inputs input:focus {
  outline: none;
}

#button {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--text-color);
  color: var(--bg-color);
  border: none;
  padding: 12px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.audio-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body-font);
  font-size: 12px;
  color: #888;
  text-align: center;
  justify-content: center;
}

#reset {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--text-color);
  padding: 8px 24px;
  cursor: pointer;
  z-index: 200;
  opacity: 0.4;
}

#reset:hover {
  opacity: 1;
}