/* Mobile-friendly styles */
@media screen and (max-width: 1440px) {
    #menuToggle {
        display: block;
        z-index: 1001;
        background-color: var(--sidebar-button-bg-color);
        color: var(--sidebar-button-text-color);
        border-style: solid;
        border-width: 1px;
        border-color: var(--sidebar-button-border-color);
        border-radius: 5px;
        cursor: pointer;
        padding: 5px 10px;
        position: fixed;
        top: 20px;
        right: 20px;
        font-weight: bold;
        font-family: 'RobotoBlack', sans-serif;
    }

    #mainlogo {
        display: block;
        margin: 0 auto;
        width: 122px;
        height: 74px;
    }

    #headerlogo {
        display: block;
        margin: 0 10px 0 0;
        width: 61px;
        height: 37px;
    }

    nav {
        display: none;
        position: fixed;
        top: 80px;
        left: 25px;
        height: 0px;
        min-height: 50%;
        max-height: calc(100vh - 160px);
        overflow: scroll;
        z-index: 1000;
        width: 75%;
        max-width: 300px;
        border-style: solid;
        border-width: 1px;
        border-color: var(--sidebar-border-color);
        border-radius: 10px;
        background-color: var(--sidebar-bg-color);
        color: var(--sidebar-text-color);
        box-shadow: 0 4px 8px var(--sidebar-shadow-color-dark);
    }

    nav.open {
        display: block;
    }

    header {
        left: 0;
        width: 100%;
        padding: 0 10px;
    }

    footer {
        left: 0;
        width: 100%;
    }

    main {
        display: block;
        margin: 10px auto 80px auto;
        width: 100%;
    }

    .pageContent {
        width: 100%;
    }

    aside {
        margin-top: 100px;
    }
}