*{
    margin: 0%;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background: rgb(104, 104, 104);
}

.nav-bar
{
    position: relative;
    width: 25rem;
    height: 7rem;
    background: rgb(225, 225, 225);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.068);
}

.nav-bar::before
{
    position: absolute;
    content: "";
    width: 120px;
    height: 120px;
    background: rgb(255, 226, 213);
    border-radius: 50%;
    bottom: 50px; 
}

nav{
    display: flex;
}

.nav-item
{
    display: flex;
    margin: 130px;
    font-size: 40px;
    cursor: pointer;
    color: rgb(255, 157, 170);
}

.nav-item:hover
{
    color: rgb(255, 111, 135);
}

.more
{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgb(255, 111, 135);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    color: rgb(255, 255,255);
    bottom: 60px;
    transition: .3s;
    cursor: pointer;
}

.social-links
{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.social-links a
{
    position: relative;
    margin: 10px;
    transform: scale(0);
    transition:  .2s;
    text-decoration: none;
    color: rgb(255, 255, 255);
    pointer-events: all;
    transition: all .3s;
}

.social-links a i 
{
    transition: all .3s;
}

.social-links a i:hover 
{
    transition: scale(1.2);
}

.active
{
    height: 230px;
    border-radius: 30px 30px 100px 100px;
    pointer-events: none;
}

.active .fa-plus
{
    position: absolute;
    animation: hide .3s linear forwards;
    transition: .3s;
}

@keyframes hide {
    
    10%{
        transform: scale(1.5);
        bottom: 25px;
    }

    90%{
        transform: rotate(45deg);
        bottom: 25px;
    }

    100%{
        opacity: 0;
    }
}



.active .social-links a
{
    animation: fadeInItem 0.6s forwards;
}

.active .social-links a:nth-child(2)
{
    animation-delay:  0.4s;
}

.active .social-links a:nth-child(3)
{
    animation-delay:  0.6s;
}

.active .social-links a:nth-child(4)
{
    animation-delay:  0.8s;
}

@keyframes fadeInItem {
    
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}