html, body { height: 100% }


body {
    --backgroundColour: ;
    background: var(--backgroundColour);
    position: fixed;
    overflow: hidden;
    -webkit-user-select: none; /* Safari, iOS browsers require -webkit prefix for this style */
    user-select: none;
    touch-action: none;
    margin: 0px;
    padding: 0px;
}

.frame-container {
    --themeBackground: ;
    width: 100vw;
    height: 100%;
    min-height: -webkit-fill-available; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--themeBackground) no-repeat center center fixed; 
    background-size: cover;
}

.app-container {
    --backgroundColour: ;
    width: inherit;
    height: 100%;
    min-height: -webkit-fill-available;
    min-width: 320px;
    border: none;
    box-shadow: 0px 0px 20px 20px rgb(0 0 0 / 20%);
    overflow: hidden;
    background-color: var(--backgroundColour);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .app-container {
        width: 75vh;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .app-container {
        width: 75vh;
    }
}

/* at the moment the App is only in portrait mode, so the same for the WebApp on mobile device */
/* (max-height:767px) => Medium devices (landscape tablets, 768px and up) */
/* (hover: none) ==> custom css for devices where the primary input mechanism cannot hover at all or cannot conveniently hover */
/* (pointer: coarse) ==> custom css for "touch targets" */
@media only screen and (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .app-container {
        /* Rotate the content container */
        transform: rotate(-90deg);
        transform-origin: top left;
        -webkit-transform: rotate(-90deg); /* old browsers */
        -webkit-transform-origin: top left; /* old browsers */
        top: 100%;
        left: 0;
        width: 90vh;
        height: 100vw;
        overflow: hidden;
        position: fixed;
    }
}