@media (max-width: 1280px) {
    .side-bar {
        background-image: none;
        background-size: inheit;
        background-repeat: no-repeat;
        width: calc(100% - 64px);
    }

        .side-bar .logo span {
            font-size: 20px;
            line-height: 20px;
        }

    .toggle-menu {
        display: block;
        position: absolute;
        top: 24px;
        left: 24px;
        height: 32px;
        width: 32px;
        background-image: url('/images/menu.png');
        background-size: contain;
        opacity: 0.85;
    }

    .toggle-menu:hover {
        cursor: pointer;
    }

    .side-bar .toggle-menu {
        top: 0;
        left: calc(100%);
        height: 48px;
        width: 48px;
        background-size: 32px;
        background-color: rgba(0, 64, 0, 1);
        background-position-x: 6px;
        background-position-y: 6px;
        background-repeat: no-repeat;
        border-radius: 0 0 8px 0;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .side-bar {
        display: block;
        position: fixed;
        z-index: 10;
        position: absolute;
        height: fit-content;
        min-height: 100%;
    }

        .side-bar.hidden {
            display: none;
        }

    .main-area {
        left: 0;
        width: 100%;
        padding-top: 72px;
    }

    .hide-main-area.hidden {
        display: none;
    }

    .hide-main-area {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9;
    }

    h1 {
        aspect-ratio: unset;
        font-size: 32px;
        margin-top: 16px;
        margin-bottom: 32px;
    }

    .account {
        padding: 16px;
        border-radius: 16px;
    }

    .download-icon {
        display: none;
    }
}

@media (max-width: 1280px) {
    .account {
        padding: 8px;
        border-radius: 8px;
    }
}