html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #080808;
}

#app,
#site-shell {
  min-height: 100vh;
  background: #080808;
}

/* Dynamically inserted hero particles do not receive Vue scoped attributes. */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d4a574;
  border-radius: 50%;
  opacity: 0;
  animation: rise 8s linear infinite;
}

@keyframes rise {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: .6; }
  90% { opacity: .2; }
  100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}