.connection-block {
    width: calc(100vw - 40px);
    padding: 0px 20px;
    max-width: 1380px;
    position: fixed;
    bottom: 15px;
    display: flex;
}

.connection-block .connection {
    width: fit-content;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 22px;
    border-radius: 14px;
    gap: 10px;
    font-weight: 500;
    background: linear-gradient(94deg, #FE4F52 1%, #FE4F52 36%, #FF7189 51%, #FE4F52 64%, #FE4F52 100%);
    transition: all 300ms;
}

.connection-block .connection.lost {
    background: linear-gradient(94deg, #FE4F52 1%, #FE4F52 36%, #FF7189 51%, #FE4F52 64%, #FE4F52 100%);
    background-size: 500%;
    animation: 10s shine linear infinite;
    transition: all 300ms;
}

.connection-block .connection.connecting {
    background: linear-gradient(94deg, #4FACFE 1%, #4FACFE 36%, #71BDFF 51%, #4FACFE 64%, #4FACFE 100%);
    background-size: 500%;
    animation: 10s shine linear infinite;
    transition: all 300ms;
}

.connection-block .connection.connected {
    background: linear-gradient(94deg, #1EC3AA 1%, #1EC3AA 36%, #45FADE 51%, #1EC3AA 64%, #1EC3AA 100%);
    background-size: 500%;
    animation: 10s shine linear infinite;
    transition: all 300ms;
}

@media (max-width: 1024px) {
    .connection-block {
        bottom: 90px;
        justify-content: flex-end;
    }
}

@media (max-width: 800px) {
    .connection-block {
        width: calc(100vw - 30px);
        bottom: 90px;
    }

    .connection-block .connection {
        
    }
}