html,
body {
  margin: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: #000000;

  cursor: default;

  user-select: none;
  -webkit-user-select: none;
}

#scene {
  position: fixed;
  inset: 0;

  background: #000000;

  touch-action: manipulation;
}

canvas {
  display: block;

  width: 100%;
  height: 100%;

  background: #000000;

  cursor: default;

  touch-action: manipulation;
}

#touch-text {
  position: fixed;

  left: 50%;

  /*
    Moved further down so it
    does not overlap the Buddha.
  */

  top: calc(50% + 145px);

  transform:
    translateX(-50%);

  z-index: 20;

  color: #8a8a8a;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  /*
    Bigger than before.
  */

  font-size: 13px;

  letter-spacing: 4px;

  white-space: nowrap;

  pointer-events: none;

  opacity: 1;

  transition:
    opacity 0.35s ease;
}

body.buddha-activated #touch-text {
  opacity: 0;
}

footer {
  position: fixed;

  bottom: 28px;
  left: 50%;

  transform:
    translateX(-50%);

  z-index: 30;
}

.email {
  color: #777777;

  text-decoration: none;

  font-size: 11px;

  letter-spacing: 2px;

  cursor: pointer;

  transition:
    color 0.4s ease;
}

.email:hover {
  color: #f5ca3b;
}

@media (max-width: 600px) {
  #touch-text {
    top: calc(50% + 125px);

    font-size: 11px;

    letter-spacing: 3px;
  }

  footer {
    bottom: 22px;
  }

  .email {
    font-size: 10px;

    letter-spacing: 1.5px;
  }
}