#mainMenu {
        .myIcons{
            font-size:150%;
        }
        
    >li{
        cursor: pointer;
        padding-inline: 10px;
        &::after{
            content:'';
            position: absolute;
            height:20px;
            top:50%;
            left:0;
            transform: translateY(-50%);
            border-right:1px solid white;
        }

        &::before {
            content: " ";
            display: block;
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 4px;
            background: var(--color2);
            transition: width .3s;
            border-radius: 4px;
        }
        &:hover{
            >*{
                color:var(--color2);
            }
            opacity: 1;
            &::before{
                width:100%
            }
        }

    }
    
}
#userIcon{
    cursor: pointer;
    &:hover{
        color:var(--color2);
    }
}
#userMenus{
    gap: 15px;
    a:not(.button) {
        color:white;
        &:hover{
            color: var(--color2)
        }
    }
}