*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
#canvas1{
    border:5px solid black;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: #4d79bc;
    max-width: 100%;
    max-height: 100%;

}

#layer1,#layer2,#layer3,#layer4,#player{
    display: none;
}
#angler1,#angler2,#lucky,#projectile,#gears,#hivewahle,#drone,#smokeExplosion,#fireExplosion{
    display: none;
}
#virtualKeyboard {
    display: none;
    position: absolute;
    width: fit-content;
    margin: 5px;
    font-size: 14px;
    top: 65%;
    left: 15%;
    transform: translate(-50%,-50%);
}

#virtualKeyboard button {
    padding: 2px;
    margin:1px;
    background-color: bisque;
}
#ArrowUp{
    position: absolute;
    bottom: 25px;
    left: 40px;
}
#ArrowDown{
    position: absolute;
    left: 40px;
    top: 25px;
}


@media only screen and (max-width: 550px) {
    #virtualKeyboard {
        display: block;
 
    }
  }
