html, body { height: 100% }

body {
    background: #fff;
    position: fixed;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    margin: 0px;
    padding: 0px;
}

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

@media (prefers-color-scheme: dark) {
    /* .frame-container {
        background: url(../assets/thrive_splash_DM.png) no-repeat center center fixed; 
        background-size: cover;
    }

    .app-container {
        background-color: #000000;
    } */
}

@media (prefers-color-scheme: light) {
    /* .frame-container {
        background: url(../assets/thrive_splash.png) no-repeat center center fixed; 
        background-size: cover;
    }

    .app-container {
        background-color: #ffffff;
    } */
}

.app-container {
    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: #ffffff;
}

/* 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;
    }

}