#stugna {
    font: 16px 'ChronoType', sans-serif;
    text-transform: uppercase;
    position: absolute;
    cursor: grab;
    display: none;
    width: 440px;
    height: 340px;
    border: 1px solid white;
    top: 0px;
    left: 0px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(16 18 27 / 40%);
    letter-spacing: 2px;
}

.topleft {
    position: absolute;
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
}

.topright {
    position: absolute;
    width: 100px;
    top: 5px;
    right: 0px;
}

.topcenter {
    position: absolute;
    width: 100px;
    top: 20px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
}

.bottomright {
    position: absolute;
    width: 100px;
    bottom: 5%;
    right: 0px;
}

.bottomleft {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    padding: 2px;
    box-sizing: border-box;
}

.stugna-view {
    position: absolute;
    border: 1px solid black;
    width: 80%;
    height: 80%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    background: url('/img/thermal.jpg');
    /* background: url('https://media.newyorker.com/photos/59097dda1c7a8e33fb390684/master/w_1600%2Cc_limit/Idomeni-detail-02.jpg'); */
    background-size: 100vw 100vh;
    background-position: -43px -33px; /* initial offset*/
}

.stugna-view:before {
    content: '';
    background: url('https://i.stack.imgur.com/sIIwU.gif');
    /* background: url('https://i.imgur.com/ZOarp5x.gif'); */
    opacity: 0.3;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 100%;
    height: 100%;
}

.crosshair {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 100px;
    height: 100px;
  
    background:
      linear-gradient(to right, white 1px, transparent 1px) 0 0,
      linear-gradient(to right, white 1px, transparent 1px) 0 100%,
      linear-gradient(to left, white 1px, transparent 1px) 100% 0,
      linear-gradient(to left, white 1px, transparent 1px) 100% 100%,
      linear-gradient(to bottom, white 1px, transparent 1px) 0 0,
      linear-gradient(to bottom, white 1px, transparent 1px) 100% 0,
      linear-gradient(to top, white 1px, transparent 1px) 0 100%,
      linear-gradient(to top, white 1px, transparent 1px) 100% 100%;
  
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }

  .crosshair:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVwWYQdchQnSyIijhqFYpQIdQKrTqYj35Bk4YkxcVRcC04+LFYdXBx1tXBVRAEP0AcnZwUXaTE/yWFFjEeHPfj3b3H3TuAq5cVzeoYBzTdNlOJuJDJrgqhV3QhAh79GJIUy5gTxSR8x9c9Amy9i7Es/3N/jl41ZylAQCCeVQzTJt4gnt60Dcb7xLxSlFTic+Ixky5I/Mh02eM3xgWXOZbJm+nUPDFPLBTaWG5jpWhqxFPEUVXTKZ/LeKwy3mKslatK857sheGcvrLMdJrDSGARSxAhQEYVJZRhI0arToqFFO3HffyDrl8kl0yuEhRyLKACDZLrB/uD391a+ckJLykcBzpfHOdjBAjtAo2a43wfO07jBAg+A1d6y1+pAzOfpNdaWvQI6NsGLq5bmrwHXO4AA0+GZEquFKTJ5fPA+xl9UxaI3AI9a15vzX2cPgBp6ip5AxwcAqMFyl73eXd3e2//nmn29wNQNXKZiWnZJwAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YGFBYeCenEP+4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPUlEQVRo3u3SwQkAMAgDQO3+O9sVhEof7d1bAglGAAAAAMC87B5WVbUCM/NmFl/pvs6J9cJQSigBAADAjA0MVgwGu6D1TwAAAABJRU5ErkJggg==') center center no-repeat;
  }