.share-buttons {
    position: fixed;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s
}

.share-buttons.show {
    opacity: 1;
    visibility: visible
}

.share-buttons a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    transition: transform .3s
}

.share-buttons a:hover {
    transform: scale(1.1)
}

#share-fb {
    background: #1877f2
}

#share-tw {
    background: #000
}

#share-wa {
    background: #25d366
}

#share-li {
    background: #0a66c2
}

#share-rd {
    background: #ff4500
}

#share-tg {
    background: #08c
}

@media (max-width:768px) {
    .share-buttons {
        position: fixed;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        flex-direction: column;
        background: 0 0;
        padding: 0;
        border-radius: 0;
        z-index: 1000;
        gap: 12px
    }
    .share-buttons a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px
    }
}