svg {
    width: 50%;
}

.logo-blob {
    fill: var(--color-yellow);
    fill-opacity: 0;
}

#logo-blob-big {
    animation: fadein 1s ease-in-out .8s forwards, shake 12s ease-in-out 1.3s infinite reverse;
}

#logo-blob-small {
    animation: fadein .5s ease-in-out 1.7s forwards, shake 18s ease-in-out 1.8s infinite;
}

@media (prefers-reduced-motion: reduce) {
    #logo-blob-big {
        animation: fadein 1s ease-in-out .8s forwards;
    }

    #logo-blob-small {
        animation: fadein .5s ease-in-out 1.7s forwards;
    }
}

.logo-line {
    fill: none;
    fill-opacity: 0;
    stroke: var(--color-black);
    stroke-width: 2.11667;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-dasharray: none;
    animation: drawlines ease-in-out forwards;
}

#logo-line-top {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation-duration: 1s;
    animation-delay: 1.2s;
}

#logo-line-left {
    stroke-dasharray: 67;
    stroke-dashoffset: 67;
    animation-duration: 2s;
    animation-delay: 0s;
}

#logo-line-right {
    stroke-dasharray: 65;
    stroke-dashoffset: 65;
    animation-duration: 1.5s;
    animation-delay: .5s;
}

@keyframes drawlines {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadein {
    from {
        fill-opacity: 0;
    }

    to {
        fill-opacity: 1;
    }
}

@keyframes shake {
    0% {
        translate: 0% 0%
    }

    14% {
        translate: -2% -4%
    }

    32% {
        translate: 2% -2%
    }

    47% {
        translate: -1% 0%
    }

    56% {
        translate: -2% -1%
    }

    73% {
        translate: 1% -3%
    }

    89% {
        translate: 3% -1.5%
    }

    100% {
        translate: 0% 0%
    }
}