html, body {
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

#viewer{
  width:100%;
  height:100%;
}

.hotspot{
  width:80px;
  height:80px;

  background:#ffffff00;

  border-radius:50%;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  /* Optymalizacja pod kątem drgania na mobile */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 768px) {
  .hotspot{
    width:60px;
    height:60px;
    margin-left: -20px;
    margin-top: -20px;
  }
}

.hotspot-DOOR, .hotspot-INFO, .hotspot-FORWARD, 
.hotspot-DOWN, .hotspot-UP, .hotspot-POINT {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
}

.hotspot-DOOR{
  background-image: url("../assets/icons/hotspots/DOOR.png");
}

.hotspot-INFO{
  background-image: url("../assets/icons/hotspots/INFO.png");
}

.hotspot-FORWARD{
  background-image: url("../assets/icons/hotspots/FORWARD.png");
}

.hotspot-DOWN{
  background-image: url("../assets/icons/hotspots/DOWN.png");
}

.hotspot-UP{
  background-image: url("../assets/icons/hotspots/UP.png");
}

.hotspot-POINT{
  background-image: url("../assets/icons/hotspots/POINT.png");
}