.joystick {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.joystick #left {
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: 20px;
    left: 20px;
}
.joystick #right {
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: 0px;
    right: 0px;
}
.jsimg {
    position: absolute;
    width: 366px;
    height: 366px;
    top:-10px;
    left: -10px;
    justify-content: center;
    display: flex;
}
.jsimg img{
    width: 150px;
    position: absolute;
}
.front {
    width: 40px;
    height: 40px;
    pointer-events: all;
    opacity: 1;
    background-image: url('../images/joystick/joystick_axis.png');
    background-size: 100% 100%;
}

.back {
    background-image: url('../images/joystick/joystick_bg.png');
    background-size: cover;
    opacity: 1;
}
@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}

.keyboardTip{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 30%;
    height: 30%;
    transform: scale(0.6);
    transform-origin: 0px 100%;
    margin: 1%;
    display: none;
}
.keyboardTip img{
    position: absolute;
    width: 22%;
    height: auto;
}
