/* CSS for crosshair overlay */
.crosshair-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Horizontal and vertical crosshair lines */
.crosshair-overlay::before,
.crosshair-overlay::after {
  content: '';
  position: absolute;
  background-color: red;
  pointer-events: none;
}

.crosshair-overlay::before { /* Vertical line */
  width: 2px;
  height: 100vh;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.crosshair-overlay::after { /* Horizontal line */
  height: 2px;
  width: 100vw;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}