.menu {
        background-color: var(--menu-bg);
        position: relative;
        overflow: visible;
        flex-shrink: 0;
    }    
    .menu a,
    .dropdown-btn {
        float: left;
        font-size: 1rem;
        color: var(--menu-text);
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    .menu .btn-icon{
        font-size: 2rem;
    }

    .menu a:hover,
    .dropdown:hover .dropdown-btn {
        background-color: var(--menu-hover);
    }

    .dropdown {
        float: left;
        position: relative;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: var(--menu-bg);
        min-width: 10rem;
        /* 160px */
        z-index: 9999;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
        /* 8px 16px */
    }

    .dropdown-content a {
        float: none;
        color: var(--menu-text);
        padding: 0.75rem 1rem;
        /* 12px 16px */
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: var(--menu-hover);
    }