*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    text-align: center;
}

svg{
    width: 300px;
}

#totale{
    animation: total 1s linear forwards;
    animation-delay: .5s;
    transform: translateY(-100%);
}

#cuore{
    animation: cuore 1s linear infinite alternate;
    animation-delay: 2.5s;
}

#My{
    animation: my 1s linear forwards;
    animation-delay: 1.5s;
    fill-opacity: 0%;
}

#Fidelity{
    animation: my 1s linear forwards;
    animation-delay: 2s;
    fill-opacity: 0%;
}

#card{
    animation: card 1s ease;
}

#coming{
    animation: soon 1s ease-in-out infinite alternate forwards;
    animation-delay: 3s;
    fill-opacity: 0%;
}

@keyframes total{
    from{
        transform: translateY(-100%);
    }
    to{
        transform: translateY(0%);
    }
}

@keyframes cuore{
    0%{
        transform: rotate(0deg);
        transform-origin: bottom;
        transform-box: fill-box;
    }
    25%{
        transform: rotate(-2deg);
        transform-origin: bottom;
        transform-box: fill-box;
    }
    50%{
        transform: rotate(0deg);
        transform-origin: bottom;
        transform-box: fill-box;
    }
    75%{
        transform: rotate(2deg);
        transform-origin: bottom;
        transform-box: fill-box;
    }
    100%{
        transform: rotate(0deg);
        transform-origin: bottom;
        transform-box: fill-box;
    }
}

@keyframes my{
    from{
        fill-opacity: 0%;
    }
    to{
        fill-opacity: 100%;
    }
}

@keyframes Fidelity{
    from{
        fill-opacity: 0%;
    }
    to{
        fill-opacity: 100%;
    }
}

@keyframes card{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0%);
    }
}

@keyframes soon{
    from{
        fill-opacity: 0%;
    }
    to{
        fill-opacity: 100%;
    }
}