.user-greeting-text,
.user-username{
    margin-bottom: 0;
    z-index: 2;
}

.outer-greeting-mod{
    display: flex;
    height: 100%;
}

.inner-greeting-mod{
    display: flex;
    gap: 8px;

    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    border-radius: 3px;

    align-items: center;
    height: fit-content;
    padding: 20px;

    position: relative;
    overflow: hidden;
}

.inner-greeting-mod:hover{
    cursor: pointer;
}

.inner-greeting-mod:hover .morning-icon
{
    fill: #ffd760;
}

.inner-greeting-mod:hover .noon-icon
{
    fill: #ffb743;
}

.inner-greeting-mod:hover .afternoon-icon
{
    fill: #ff7838;
}

.morning-icon,
.noon-icon,
.afternoon-icon{
    display: flex;
    align-items: center;
    transition: fill 150ms ease-in-out;
}

.username-icon-container{
    display: flex;
    align-items: center;
    gap: 8px;
}

@media screen and (max-width: 408px){
    .inner-greeting-mod{
        flex-direction: column;
        align-items: flex-start;
    }

    .morning-icon,
    .noon-icon,
    .afternoon-icon{
        height: 32px;
        width: 32px;
    }
}