*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin:0;
  cursor:none;        
  overflow:hidden;    
}

#back {
  background:url(assets/camera-snapshot-picture.avif);
  background-size:cover;
  width:100%;
  height:100vh;
}

#camera {
  border:2px solid #000;
  border-radius:25px;
  position:absolute;
}

#camera::after {
  content:attr(data-shot);
  color:RGBA(0,0,0, 0.5);
  font-family:Arial, Impact;
  font-size:64px;
  position:absolute;
  top:0;
  right:0;
  padding-right:15px
}

#pointer {
  width:60px;
  height:60px;
  border:15px solid rgba(0,0,0, 0.05);
  border-radius:75px;
  background:RGBA(0,0,0, 0.25);
  filter:blur(0.5);
  margin:auto;
  position:relative;
  top:30%;
}

#camera.active {
  background:rgba(0,0,0, 0.5);
  mix-blend-mode: overlay;
  transition:0.4s all ease;
}

#camera.active #pointer {
  background:rgba(0,0,0, 0.7);
}

#photo {
  background:black;
  width:400px;
  height:250px;
  position:absolute;
  right:0;
  bottom:0;
  margin:2em;
  border:10px solid #FFF;
  box-shadow:0 0 10px #333;
  opacity:0;
  transition:4s all ease; 
}

#photo.active {
  opacity:1;
  transition:none;
}