@font-face {
  font-family: "Norwester";
  src: url(./norwester.otf);
}

:root {
  --text: #fafafa;
  --glow: #ffffff65;
  --background: #0a0a0a;
  --constructionA: #ffff00;
  --constructionB: #000000;
}

html, body {
    margin: 0;
    font-family: "Norwester" !important;
    background-color: var(--background);
    color: var(--text);
}

* {
    font-family: 'Norwester', serif !important;
}

#cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--text);
  mix-blend-mode: difference;
  background-blend-mode: difference;
  transform: scale(1);
  transition-property: scale, transform, translate;
  transition-duration: 300ms, 25ms, 25ms;
  transition-timing-function: ease-out, ease-out, ease-out;
  z-index: 1000;
  box-shadow: 0 0 20px var(--glow), 0 0 30px var(--glow), 0 0 40px var(--glow);
}

#tracker {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--text);
  mix-blend-mode: difference;
  background-blend-mode: difference;
  transform: scale(1);
  transition-property: scale, transform, translate;
  transition-duration: 100ms, 300ms, 100ms;
  transition-timing-function: ease-out, ease-in-out, ease-out;
  z-index: 1000;
  box-shadow: 0 0 20px var(--glow), 0 0 30px var(--glow), 0 0 40px var(--glow);
}

#construction {
  position: absolute;
  text-align: center;
  top: 50%;
  left: -5%;
  font-size: 8ch;
  color: var(--constructionA);
}

#soontm {
  position: absolute;
  text-align: center;
  bottom: -7.5%;
  left: 19%;
  font-size: 1ch;
  color: var(--constructionB);
}

html,
html * {
    width: 100%;
    height: 100%;
    cursor: none;
    overflow: hidden;
}