html, body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#111;
  font-family: Helvetica, Arial, sans-serif;
}

body{
  position:relative;
}

.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0.9;
  transition:opacity 1s ease;
  pointer-events:none;
}

.hidden{
  opacity:0;
}

.number{
  position:absolute;
  z-index:2;
  border:none;
  background:none;
  font-size:7.5rem;
  font-weight:900;
  color:white;
  cursor:pointer;
  opacity:0.9;
  transition:opacity .2s ease, text-shadow .2s ease, transform .2s ease;
  padding:0;
  line-height:1;
}

.number.active{
  text-shadow:0 0 12px white, 0 0 30px white;
  opacity:1;
}

@media (max-width: 700px){
  .number{
    font-size:5rem;
  }
}