* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-image: url("/img/web_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
}

canvas {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    outline: none;
    height: 100%;
    border: 1px solid black;
    margin: 0 auto 0;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    background-color: transparent;
}

canvas:focus, canvas:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

@media(max-width: 540px) {
    body {
        background-color: lightblue;
        width: 100%;
        height: auto;
    }

    canvas {
        margin-top: 20%;
        touch-action: none;
    }
}

canvas button {
    margin: auto;
    padding: 30px;
}

.qrcode {
    display: none;
    position: absolute !important;
    top: 640px;
    left: calc(50% - 220px);
    z-index: 999;
}