html { 

    box-sizing: border-box;
    --bgColorMenu : rgba(29, 29, 39, 0.5);
    --duration: .7s;    
    
    }

    .menu{
    border-radius: 100px;
    margin: 15% 1% 4% 0%;
    display: block;
    /* Works well with 100% width  */
    width: 7.3em;
    height: 45%;
    font-size: 20px;
    padding: 0 2.85em;
    position: fixed;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    box-sizing: border-box;
    z-index: 1000;
    }
    
    .menu__item{
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: url(..//Cursor.png), pointer;
    position: relative;
    border-radius: 50%;
    align-items: center;
    will-change: transform;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--timeOut , var(--duration));
    
    }
    
    .menu__item::before{

    
    content: "";
    z-index: -1;
    width: 170%;
    height: 100%;
    border-radius: 50%;
    position: fixed;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);
    
    }    
    
    .menu__item.active {
    
    transform: translate3d(0, -2% , 0);
    
    }
    
    .menu__item.active::before{
    
    transform: scale(1);
    background-color: var(--bgColorItem);
    
    }
    
    .icon{
    width: 90%;
    height: 20%;
    stroke: white;
    fill: rgba(29, 29, 39, 0.5);
    stroke-width: 4%;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    
    }
    
    .menu__item.active .icon {
    
    animation: strok 2s reverse;
    
    }
    
    @keyframes strok {
    
    100% {
    
        stroke-dashoffset: 400;
    
    }
    
    }
    
    .svg-container {
    
    width: 0;
    height: 0;
    
    }
    
    .social{
        width: 400%;
        height: 10%;
        margin: 50% 0% 0% -160%;
        display: flex;

    }

    .social .icon{
        width: 1.5em;
        height: 1.1em;
        margin: 0% 10% 0% 0%;
        left: 5%;
        display: inline-block;
    }

    .wpp{
        position: absolute;
     
        margin-top: -2%;
        margin-left: -1%;
        width: 1.5em;
        height: 1.1em;
    }

    /*.wpp img{
        color: rgba(255, 255, 255, 1);
        width: 1.5em;
        height: 1.1em;
    }*/
  

    .social .menu__item::before{
        content: "";
        z-index: -1;
        width: 90%;
        height: 80%;
        border-radius: 50px;

    }

    #info{
        visibility: hidden;
        transition: all .5s ease-in-out;
        cursor: url(..//Cursor.png), pointer;
    }

a:hover #info{
    cursor: url(..//Cursor.png), pointer;
        visibility: visible;
        transition: all 5s ease-in-out;
    }
    @media screen and (max-width: 50em) {
    .menu{
        font-size: 20px;
    }
}