* {box-sizing: border-box;}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden; /* Prevents scrollbars */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dcd28e; /* Optional background color */
}

.img-magnifier-container {
  position: relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
  background: #ffffbbb1;

  background-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;

  --cross-hair: "+";
}

.img-magnifier-glass::after {
  content: var(--cross-hair);
  color: red;
  font-size: 20px; /* Adjust size as needed */
  font-weight: bold;
  line-height: 1;
}