*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* border: "none"; */
    
    overscroll-behavior: none;
    /**compatibility*/
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* max-width: 100%;
    max-height: 100%; */
}
#h1Element{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-style: italic;
    color: rgb(255,136,0);
}
#mainCanvas{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
}
#textCanvas{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    background-color: rgba(255,255,255,0.1);
    justify-content: center;
    text-align: center;
    display: none;
    border: 4px solid rgb(255,136,0);
    border-radius: 40px;
}

#soundBtn{
    position: fixed;
    padding: 0.5rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-family: "Rubik bubble","Georgia", Tahoma, Geneva, Verdana, sans-serif;
    border: none;
    /* position: absolute; */
    background-color: rgb(255,136,0);
    top: 40px;
    right: 40px;
    color: whitesmoke;
    cursor: pointer;
    width: 4rem;
    /* margin-top: 15px; */
}
#soundBtn:hover {
    opacity: 70%;
}

img, #mainCanvas, #soundBtn{
    display: none;
}