@media only screen and (pointer: coarse) and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}

/* Some CSS styling */
#sketchpadapp {
    /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.topside {
    float: top;
    width: 100%;
    height: 3rem;
    background-color: black;
    padding: 0;
    border-radius: 0;
}

.drawside {
    /*position:relative;*/
    float: top;
    margin: 0;
    width: 100%;
    max-height: calc(100vh - 12rem);
}
.drawside::after {
    content: '';
    display: block;
    /* how much is the height compared to the width (%) */
    padding-top: 133.3333%;  
}

#sketchpad {
    float: top;
    aspect-ratio: 3 / 4;
    /*height: 344px;
    width: 254px;*/
    position: relative;
    max-width: 100%;
    max-height: 100%;
    /*height: 133.333vw;*/
    width: 100%;
    height: 100%;
    /* Necessary for correct mouse co-ords in Firefox */
}
.drawside-layers {
    pointer-events: none;
    /*position:relative;*/
    top:3rem;
    float: top;
    margin: 0;
    width: 100%;
    max-height: calc(100vh - 12rem);
}
.sketchpad-layer {
    float: top;
    aspect-ratio: 3 / 4;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    top: 3rem;
    pointer-events: none;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

#sketchpad-overlay {
    background-image: url("../assets/imgs/drawingOverlay.png");
}

#sketchpad-underlay {
    background-image: url("../assets/imgs/drawingUnderlay.png");
}