/*** GLOBAL ***/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

body {
  background: #000;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: opacity 2s;
  -webkit-user-select: none;
  user-select: none;
}

:focus {
  outline: none;
}

[aria-busy]::before,
[aria-busy]::after {
  position: absolute;
  top: 50%;
  color: #0c0;
  font-family: 'Orbitron', sans-serif;
  opacity: 0;
  transform: translateY(-50%);
}

[aria-busy]::before {
  left: calc(50% - 3rem);
  animation: fade-in 0.3s linear forwards;
  content: 'Loading';
}

[aria-busy]::after {
  left: calc(50% + 1.5rem);
  animation: fade-in 0.3s linear forwards, loading 10s linear infinite;
  content: '...';
}

[aria-busy] body {
  opacity: 0;
}

/*** THREE.JS ***/

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*** ANIMATIONS ***/

@keyframes fade-in {
  /* Prevent font FOUC */
    0% { opacity: 0; }
   50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes loading {
    0% { content: '...'; }
   10% { content: '....'; }
   20% { content: '.....'; }
   30% { content: '......'; }
   40% { content: '.......'; }
   50% { content: '........'; }
   60% { content: '.........'; }
   70% { content: '..........'; }
   80% { content: '...........'; }
   90% { content: '............'; }
  100% { content: '.............'; }
}