html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: Verdana, sans-serif;
  background-color: black;
}

.content-wrapper {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: flex-start; /* near top */
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

.content {
  position: relative; /* needed for absolute icons inside */
}

.content img {
  display: block;
  width: 20vw;
  height: auto;
}

/* metallic silver icon placeholders */
.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(145deg, #ccc, #999); /* metallic look */
  border-radius: 50%;
  box-shadow: 0 0 5px #fff inset, 0 0 5px #666; /* subtle highlights/shadow */
}

/* Positions relative to the image */
.icon.top-left {
  top: 200px;
  left: -40px;
}

.icon.bottom-left {
  bottom: 50px;
  left: -40px;
}

.icon.bottom-center {
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.icon.top-right {
  top: 200px;
  right: -40px;
}

.icon.bottom-right {
  bottom: 50px;
  right: -40px;
}

/* full-page inversion overlay */
.cursor-invert {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(
    circle 70px at var(--x, -9999px) var(--y, -9999px),
    white 0%,
    transparent 80%
  );
  mix-blend-mode: difference;
}