html, body {
    height: 100%;
    overflow: hidden;   
    position: fixed;
}

.container {
    width: 100vw;
    height: 135vh;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    top: -25px;
}

.hal {
    width: 20%;
    background-color: transparent;
    position: absolute; 
    top: 40%;          
    left: 40%;   
    z-index: 2;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
}

.sink {
    display: block;
    position: relative;     
    width: 100vw;           
    overflow: hidden;
    z-index: 1;
    opacity: 100%;
    left: 0;
    transform: none;
    margin: 0;
}

/* class-based fallback for legacy browsers / JS toggle */
.aspect-5-3 .sink {
  width: 1300px;
  left: 50%;
  transform: translateX(-50%);
}
.aspect-5-3 .hal {
  width: 220px;
  top: 37%;
}

/* 5:3 breakpoint (modern browsers) */
@media (max-aspect-ratio: 5/3) {
  .sink {
    width: 1300px;
    left: 50%;
    transform: translateX(-50%);
  }
  .hal {
    width: 220px;
    top: 37%;
  }
}

.sponge {
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 70px;
    z-index: 3;
}

.soap {
    position: absolute;
    top: 35%;
    left: 5%;
    font-size: 70px;
    z-index: 3;
}

.rinse {
    position: absolute;
    top: 50%;
    left: 5%;
    font-size: 70px;
    z-index: 3;
}

.music {
    position: absolute;
    bottom: 10%;
    left: 5%;
    font-size: 70px;
    cursor: pointer;
    z-index: 3;
}

/* prevent mobile browsers from auto-scaling fonts */
html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* avoid mobile UA scaling */
.sink {
  image-rendering: auto;
  max-width: none;
}

/* keep interactive elements touch-friendly  */
.hal, .sponge, .soap, .rinse {
  touch-action: none;
}