:root {
    --app-bg: #fdfdfd;
    --app-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --app-safe-top: 12px;
    --app-safe-bottom: 12px;
}

@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --app-safe-top: calc(12px + constant(safe-area-inset-top));
        --app-safe-bottom: calc(12px + constant(safe-area-inset-bottom));
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --app-safe-top: calc(12px + env(safe-area-inset-top));
        --app-safe-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

html,
body,
#sceneContainer {
    height: 100%;
    min-height: 100%;
    margin: 0;
    font-family: var(--app-font);
    background: var(--app-bg);
}

html,
body {
    min-height: -webkit-fill-available;
}

#sceneContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: var(--app-safe-top);
    padding-bottom: var(--app-safe-bottom);
}

html.is-capacitor-ios #sceneContainer {
    padding-top: calc(var(--app-safe-top) + 8px);
    padding-bottom: calc(var(--app-safe-bottom) + 8px);
}

#sceneContainer.scene-slide-in-right {
    animation: sceneSlideInRight 0.28s ease;
}

#sceneContainer.scene-slide-in-left {
    animation: sceneSlideInLeft 0.28s ease;
}

@keyframes sceneSlideInRight {
    from {
        transform: translateX(20px);
        opacity: 0.85;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sceneSlideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0.85;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}