@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;
    }
}
body {
    margin:0;
    padding:0;
    border:0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    background-color: black;
}
#overlayMask, #composedCanvas {
    display:none;
}

.topbtn {
    opacity:0.5;
    float:right;
    width: 11vw;
    height:3rem;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../assets/imgs/color.svg") !important;
}
.onBtn{
    opacity:1 !important;
}

#clearbutton {
    width: 12vw !important;
background-image: url("../assets/imgs/delete.svg") !important;
transform: scale(1.2);
transform: translate(0,0.4rem);
}

#white-button {
background-image: url("../assets/imgs/white.svg") !important;
transform: scale(0.8);
transform: translate(0,0.5rem);
}

#pink-button {
background-image: url("../assets/imgs/pink.svg") !important;
transform: scale(0.9);
transform: translate(0,0.3rem);
}

#red-button {
background-image: url("../assets/imgs/red.svg") !important;
transform: scale(1);
transform: translate(0,0rem);
}

#orange-button {
background-image: url("../assets/imgs/orange.svg") !important;
transform: scale(1.1);
transform: translate(0,0rem);
}

#yellow-button {
background-image: url("../assets/imgs/yellow.svg") !important;
transform: scale(1.1);
transform: translate(0,0.5rem);
}

#green-button {
background-image: url("../assets/imgs/green.svg") !important;
transform: scale(1);
transform: translate(0,1rem);
}

#blue-button {
background-image: url("../assets/imgs/blue.svg") !important;
transform: scale(0.9);
transform: translate(0,0.5rem);
}

#black-button {
background-image: url("../assets/imgs/black.svg") !important;
transform: scale(0.8);
transform: translate(0,0rem);
}

#ARHintContainer {
    position:fixed;
    width: 100vw;
    height: 12rem;
    max-height: 50vw ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../assets/imgs/head.png");
    bottom:0;
      display: flex;
    justify-content: center;
    /*filter: invert(1);*/
}

#ARHint {
        width: 25%;
        height:25%;
        transform:translate(0,12.5vw);
        margin: 0 auto;
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
        justify-content: center;

}