*{
  box-sizing:border-box;
}

body{
  margin:0;
  overflow:hidden;
  background:black;
  font-family:"Courier New", monospace;
}

#camera{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:1;
}

.overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  pointer-events:none;
}

.text-grid{
  position:absolute;
  top:-6vh;
  left:-8vw;
  width:120vw;
  height:115vh;

  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(8, 1fr);
  align-items:center;
  justify-items:center;

  color:#fff3a8;
  opacity:1;
  font-size:clamp(22px, 3vw, 48px);
  line-height:.85;
  letter-spacing:.01em;
  text-shadow:0 0 9px rgba(255,243,168,.9);

  animation:drift 16s infinite alternate ease-in-out;
}

.text-grid div{
  white-space:nowrap;
}

.permission-message{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  color:#fff3a8;
  font-size:14px;
}

@keyframes drift{
  from{
    transform:translate(-3vw, -2vh) rotate(-1deg);
  }

  to{
    transform:translate(3vw, 2vh) rotate(1deg);
  }
}