* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

:root {
  --x:100px;
  --y:100px;
  --primary-radial:rgba(255, 255, 255, 0.2);
  --secondary-radial:rgba(0, 0, 0, 0.9);
  --spotlight-size: 150px;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/31429878/pexels-photo-31429878.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
main .box {
  width: 100%;
  height: 100%;
  background: radial-gradient(var(--spotlight-size) at var(--x) var(--y), var(--primary-radial), var(--secondary-radial));
  transition: background 0.1s ease;
  pointer-events: none;
}

@media (max-width: 768px) {
  :root {
    --spotlight-size: 120px;
  }
  .box {
    -webkit-tap-highlight-color: transparent;
  }
}

/*# sourceMappingURL=style.css.map */