html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Keeps the 'lock' on the browser window */
}

::selection {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.mud-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-main-content {
    flex: 1;
    overflow-y: auto; /* THIS allows vertical scrolling in the middle */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Makes scrolling smooth on iPhones */
}

/* Ensure content doesn't get hidden behind the bars */
@media (max-width: 959px) {
    .mud-main-content {
        padding-top: 56px !important;
        padding-bottom: 90px !important;
    }
}

@media (min-width: 960px) {
    .mud-main-content {
        padding-top: 64px !important;
    }
}