.berlonia-social{
    position:fixed;
    right:30px;
    bottom:30px;
    width:58px;
    height:58px;
    z-index:99999;
}

.berlonia-social-trigger,
.berlonia-social-item{
    position:absolute;
    right:0;
    bottom:0;

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(12,12,12,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.12);

    color:#ffffff;
    text-decoration:none;

    box-shadow:0 12px 32px rgba(0,0,0,.28);

    transition:
        bottom .45s cubic-bezier(.22,1,.36,1),
        opacity .3s ease,
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.berlonia-social-item{
    opacity:0;
    pointer-events:none;
}

.berlonia-social svg{
    width:24px;
    height:24px;
    display:block;
}

.berlonia-social-trigger{
    cursor:pointer;
    z-index:10;

    padding:0;
    margin:0;
    outline:none;
    font:inherit;

    appearance:none;
    -webkit-appearance:none;

    flex-direction:column;
    gap:5px;
}

.berlonia-social-trigger span{
    width:20px;
    height:1px;
    background:#ffffff;
    display:block;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        opacity .25s ease,
        width .3s ease;
}

.berlonia-social.open .telegram{
    bottom:72px;
    opacity:1;
    pointer-events:auto;
}

.berlonia-social.open .instagram{
    bottom:144px;
    opacity:1;
    pointer-events:auto;
}

.berlonia-social.open .youtube{
    bottom:216px;
    opacity:1;
    pointer-events:auto;
}

.berlonia-social.open .berlonia-social-trigger,
.berlonia-social-item:hover{
    border-color:rgba(0,183,255,.55);
    box-shadow:
        0 0 12px rgba(0,183,255,.28),
        0 0 34px rgba(0,183,255,.12),
        0 12px 32px rgba(0,0,0,.35);
}

.berlonia-social.open .berlonia-social-trigger span:nth-child(1){
    width:13px;
    transform:translate(-4px,6px) rotate(-45deg);
}

.berlonia-social.open .berlonia-social-trigger span:nth-child(2){
    opacity:0;
}

.berlonia-social.open .berlonia-social-trigger span:nth-child(3){
    width:13px;
    transform:translate(4px,-6px) rotate(45deg);
}

@media(max-width:768px){
    .berlonia-social{
        right:18px;
        bottom:18px;
        width:52px;
        height:52px;
    }

    .berlonia-social-trigger,
    .berlonia-social-item{
        width:52px;
        height:52px;
    }

    .berlonia-social svg{
        width:22px;
        height:22px;
    }

    .berlonia-social.open .telegram{
        bottom:64px;
    }

    .berlonia-social.open .instagram{
        bottom:128px;
    }

    .berlonia-social.open .youtube{
        bottom:192px;
    }
}