html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents scrolling */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on touch devices */
}

#app {
    width: 100%;
    height: 100%;
    overflow: auto; /* Ensure internal scrolling if content overflows */
    /*display: flex;*/
    /*flex-direction: column; !* Optional: Flexbox for modern layouts *!*/

    /* Apply safe area insets */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

.shadow-bottom-for-fixed-element{
box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.75);
}