.user-menu {
    position: relative;
    display: inline-block;
    margin-right: 1.5rem;
    cursor: pointer;
}

.avatar {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    border: 0.125rem solid #ccc;
    transition: border-color 0.3s;
}

.avatar:hover {
    border-color: red;
}

.dropdown-menu {
    position: absolute;
    top: 3.4375rem;
    right: -2.03125rem;
    background: white;
    border: 0.0625rem solid #ddd;
    border-radius: 0.3125rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 7.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-0.625rem);
    transition: opacity 1s ease, transform 1s ease;
    pointer-events: none;
}

.dropdown-menu li {
    text-align: center;
}

.dropdown-menu li a {
    display: block;
    padding: 0.625rem;
    text-decoration: none;
    color: black;
}

.dropdown-menu li a:hover {
    background: #f4f4f4;
}

.user-menu:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}