/* Default font size for the root element */
html, html body {
    font-size: 14px !important;
}

/* Prevent iOS bounce/rubber-banding effect when scrolling */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Keep app chrome below iOS status/notch safe area */
.ppe-app-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    height: calc(64px + constant(safe-area-inset-top));
    height: calc(64px + env(safe-area-inset-top));
}

#nav-drawer {
    top: calc(var(--mud-appbar-height) + constant(safe-area-inset-top)) !important;
    top: calc(var(--mud-appbar-height) + env(safe-area-inset-top)) !important;
    height: calc(100% - var(--mud-appbar-height) - constant(safe-area-inset-top)) !important;
    height: calc(100% - var(--mud-appbar-height) - env(safe-area-inset-top)) !important;
}

.ppe-main-content {
    padding-top: calc(5rem + constant(safe-area-inset-top)) !important;
    padding-top: calc(5rem + env(safe-area-inset-top)) !important;
}

/* Scale down font size on mobile, which scales everything using rem units */
@media (max-width: 580px) {
    html, html body {
        font-size: 13px !important;
    }
}

/* Scale down font size on mobile, which scales everything using rem units */
@media (max-width: 480px) {
    html, html body {
        font-size: 12px !important;
    }
}