#menu {
    color: white;
    aspect-ratio: 39 / 1;
    overflow: auto; /*جهت حذف فواصل عمودی*/
    font-size: 0; /*جهت حذف شکاف‌های افقی*/
    background-color: #282828;
}

.desktop #menu {
    margin-top: 6vw;
}

#menu a {
    color: white;
    text-decoration: none;
    font-size: 1vw; /*1vw یعنی اندازه فونت برابر با 1٪ از عرض پنجره مرورگر باشد.*/
}

#menu > div {
    display: inline-block;
    height: 100%;
    /* opacity: 0.5;*/ /*DEBUG*/
    vertical-align: top;
    color: white;
    width: 8%;
    text-align: center;
    font-weight: 500;
    position: relative;
    /*margin-left: 8%;*/
    display: inline-block; /* باعث می‌شود عرض outer به اندازه محتوا باشد */
}

    #menu > div:nth-child(even) {
        /* background-color: red;*/ /*DEBUG*/
    }

    #menu > div:nth-child(odd) {
        /* background-color: blue;*/ /*DEBUG*/
    }

    #menu > div:first-child {
        width: 2%;
    }

    #menu > div > div {
        position: absolute;
        top: 50%;
        /*  left: 50%;*/
        /*transform: translate(-50%, -50%);*/
        transform: translate(50%, -50%);
        display: inline-block; /* عرض inner بر اساس محتوا تنظیم می‌شود*/
        white-space: nowrap; /* جلوگیری از شکستن خطوط در صورت نیاز */
    }

.div-with-fade-border {
    position: relative;
    background-color: white; /* رنگ پس‌زمینه div */
}

    .div-with-fade-border::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px; /* ضخامت خط */
        width: 100%;
        /*background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
        background: linear-gradient(to left, #8080805e,#282828);
    }