:root{
    --primaryColor: #25d366;
    --colorHover: #25d366;
    --sizeButton: 44px;
    --sizeIcons: 40px;
    --widthContent: 200px;
    --heightContent: 130px;
}

.menu-content{
    width: var(--widthContent);
    height: var(--heightContent);
    position: fixed;
    bottom: 67px;
    left: 100%;
    transform: translateX(-45%);
    z-index: 99;
}

.menu-item{
    width: var(--sizeButton);
    height: var(--sizeButton);
    background: var(--primaryColor);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 16%;
    transition: transform 300ms;
}

.menu-item:hover{
    background: var(--colorHover);
}

.menu-item img{
    width: var(--sizeIcons);
    transition: transform 300ms;
}

#menu{
    z-index: 10;
}

.menu-active #menu img{
    transform: rotate(45deg);
}

.menu-active .menu-item:nth-child(2){
    transform: translateX(-70px);
}

.menu-active .menu-item:nth-child(3){
    transform: translateY(-70px);
}

.menu-active .menu-item:nth-child(4){
    transform: translateX(70px);
}