:root {
  --screen-width: 100vw;
  --screen-height: 100vh;
  --blur-radius: 100px;
  --lens-size: 400px;
  --hint-color: deeppink;
}

.lens {

  //--screen-left: 0;
  //--screen-top: 0;
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
  //top: var(--screen-top);
  //left: var(--screen-left);
  top: 0;
  left: 0;

  transition: transform ease 100ms;
}

#filter {
  z-index: 999;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  position:absolute;
  backdrop-filter: blur(var(--blur-radius));
  //background-color: #ffffffff;
}

#hint {
  width: var(--lens-size);
  height: var(--lens-size);
  position: absolute;
  border: 3px solid var(--hint-color);
  top: calc(50% - var(--lens-size)/2);
  left: calc(50% - var(--lens-size)/2);
  border-radius: calc(var(--lens-size));
  transition: opacity 1000ms;
  opacity: 100%;
  z-index: 10000;

  text-align: center;
  backdrop-filter: blur(10px);

  p {
    font-family: Times, "Times New Roman", serif;
    background-color: deeppink;
    font-weight: bold;
    font-style: italic;
    width: 50%;
    color: white;
    margin: auto;
    font-size: 2em;
    top: 40%;
    position: relative;
    //left: 50%;
  }

  &.hidden, &.rehidden {
    border-color: #ff000000;
    opacity: 0%;
    //transition: all  1000ms;

  }

  &.hidden {
    transition: all 0ms;
  }
}