.add {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    transform: scale(.5);
    transform-origin: 50% 50%;
    transition: transform .4s ease;
    a {
        display: block;
        position: relative;
        width: 100%;
        padding-bottom: 100%;
        background: #5628EE;
        -webkit-backface-visibility: hidden;

        svg {
            display: block;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 25%;
            top: 20%;
            margin: -7px 0 0 -7px;
            opacity: 0;
            fill: #fff;  
        }
       
    }
    
    
        a {
            --scale: 1;
            pointer-events: none;
            border-radius: 50%;
            animation: pointerEvent 0s linear forwards .4s;
            transition: border-radius .15s ease .1s, transform .25s ease .15s;
            &:nth-child(1) {
                transform: translate(-6px, -6px) scale(var(--scale));
            }
            &:nth-child(2) {
                transform: translate(-6px, 6px) scale(var(--scale));
            }
            &:nth-child(3) {
                transform: translate(6px, -6px) scale(var(--scale));
            }
            &:nth-child(4) {
                transform: translate(6px, 6px) scale(var(--scale));
            }
            svg {
                opacity: .7;
                transition: all .3s ease .2s;
                transform: scale(1) rotate(-45deg);
            }
            &:hover {
                --scale: .92;
                transition: border-radius .2s ease .1s, transform .25s ease 0s;
                svg {
                    opacity: 1;
                    transition: all .3s ease 0s;
                }
            }
        }
    }
}

img {
    display: block;
    height: 28px;
}
.dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
    
}

@keyframes pointerEvent {
    100% {
        pointer-events: auto;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

/* // Center & dribbble */
.chat_s {
    
    font-family: Roboto, Arial;
    display: flex;
    justify-content: right;
    align-items: center;
   
    
}