html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

.icon-hand-vertical {
    mask: url('Icons/gesture-swipe-vertical.svg') no-repeat center / contain;
}
.icon-hand-horizontal {
    mask: url('Icons/gesture-swipe-horizontal.svg') no-repeat center / contain;
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.blue-hand-position{
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}
.green-hand-position {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
}
.red-hand-position{
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);    
}



.slide-hint {
    height: 30%;
    aspect-ratio: 1;    
    pointer-events: none;
}




.slide-hint-animation-horizontal {
    animation: slide-hint-horizontal 2s ease-in-out infinite;
}
@keyframes slide-hint-horizontal {
    0% { transform: translate(-50%, -50%) translateX(0); }
    20% { transform: translate(-50%, -50%) translateX(-10%); }
    40% { transform: translate(-50%, -50%) translateX(0); }

    100% { transform: translate(-50%, -50%) translateX(0); }
}

.slide-hint-animation-vertical {
    animation: slide-hint-vertical 2s ease-in-out infinite;
}
@keyframes slide-hint-vertical {
    0% { transform: translate(-50%, -50%) translateY(0); }
    20% { transform: translate(-50%, -50%) translateY(-10%); }
    40% { transform: translate(-50%, -50%) translateY(0); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

.error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 16px;
    z-index: 10;
    padding: 20px;
    color: white;
    background-color: rgb(109, 0, 0);
}

.canvas {
  cursor: grab;
}