:root {
  --x: 0px;
  --y: 0px;
}

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

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

body {
  background-color: oklch(0% 0 0deg);
}

main {
  mix-blend-mode: hard-light;
  background-image: url("https://images.unsplash.com/photo-1484511487972-0e3e438c63b2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 5;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 10;
  background-image: radial-gradient(in oklch 0px at var(--x) var(--y), transparent, rgba(0, 0, 0, 0.925));
}/*# sourceMappingURL=style.css.map */