svg {
	padding: 2em;
    display: block;
    margin: auto;
    width: 75%;
}
svg #flask {
    fill: #7c7c7c;
    fill-opacity: 1;
    animation: flask 2s forwards;
    animation-delay: 5s;
}
svg #atom {
    fill: #7c7c7c;
    fill-opacity: 0;
    transform-origin: 57% 33%;
    animation: atom 3.2s forwards;
    animation-delay: 1.8s;
}
svg #phage {
    fill: #7c7c7c;
    fill-opacity: 0;
    transform-origin: 85% 45%;
    animation: phage 3s forwards;
    animation-delay: 2s;
}
svg #logo_text {
    fill: #07b2de;
    fill-opacity: 0;
    animation: appear 0.5s ease forwards;
    animation-delay: 5s;
}
@keyframes flask {
    from{
        fill: #fe7f7f;
    }
    to{
        fill: #fe7f7f;
    }
}

@keyframes atom {
    0%{
        transform: rotate(0deg);
        fill-opacity: 0;
    }
    95%{
        transform: rotate(360deg);
        fill: #7c7c7c;
        fill-opacity: 1;
    }
    100%{
        fill-opacity: 1;
        fill: #fe9854; 
        
    }
}
@keyframes phage {
    0%{
        transform: scale(0) rotate(0deg);
        fill-opacity: 0;
    }
    25%{
        transform: scale(0.10) scaleY(0.75);
    }
    50%{
        transform: scale(0.3)  translateY(-400px);
    }
    60%{
        transform: scale(0.3)  translateY(-50px) scaleY(0.85);
    }
    75%{
        transform: scale(0.4) rotate(5deg) translateY(-300px);
    }
    95%{
        transform: scale(1);
        fill: #7c7c7c;
        fill-opacity: 1;
    }
    100%{
        fill-opacity: 1;
        fill: #a9dd87;
    }
}
@keyframes appear {
    from{
        fill-opacity: 0;
    }
    to{
        fill-opacity: 1;
    }
}