* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #000103;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: sans-serif;
}
.canvas-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 100vh;
  /*
   margin: 0 auto;
   max-width: 1024px;
   overflow: hidden;
   */
}
.canvas-wrapper video {
  opacity: 0;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  pointer-events: none;
}
.canvas-wrapper canvas {
  width: 100%;
  height: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
}
.vh-100 {
  height: 100vh;
  width: 100%;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
}
.vh-100::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  /* border-bottom: 5px solid tomato; */
  z-index: 2;
}
.vh-100 > h1 {
  font-size: clamp(4rem, 10vw, 6rem);
  color: #ff906f;
  font-weight: 700;
}

.vh-100 > h3 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #ff906f;
  font-weight: 400;
}