
menufooter
{
    flex-direction: row;
    justify-content: center;
    pointer-events: none;
    background-color: #181b26dd;
    backdrop-filter: blur( 20px );
    box-shadow: 0px 0px 200px #000f;
    border-top: 1px solid #2e344b;
    height: 90px;
    width: 100%;
}

menufooter > .container
{
    max-width: 1200px;
    flex-grow: 1;
    padding: 0px 32px;
    align-items: center;
    pointer-events: all;
}

.center
{
    flex-grow: 1;
}

.right
{
    gap: 16px;
}

.footer-button
{
    align-items: center;
    cursor: pointer;
}

.footer-button:hover
{
    transform: scale( 1.1 );
}


.player-button > .inner
{
    width: 42px;
    height: 42px;
    background-size: contain;
    border-radius: 1000px;
    border: 2px solid #477fe7;
}

.friends-button > .inner
{
    height: 100%;
    padding: 0 22px;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    background-size: contain;
    border-radius: 1000px;
    background-color: #477fe7;
    align-items: center;
    justify-content: center;
    color: white;
}

.friends-button > .inner > i
{
    opacity: 0.5;
}

.friends
{
    gap: 8px;
    flex-shrink: 1;
    overflow-x: scroll;
}

profileimage
{
    transition: all 0.1s linear;
}

.friends:hover profileimage:not( :hover)
{
    filter: saturate( 0.6 );
    opacity: 0.3;
}