html, body {
    max-height: 100vh;
    height: 100vh;
    overflow: hidden;
}



@media only screen and (max-width: 600px) {
    .blob {
        float: right;
        width: 300px;
        height: 300px;
        position: relative !important;
    }
}

@keyframes morpheus {
    0% {
        border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%;
    }
    20% {
        border-radius: 60% 40% 40% 60% / 60% 25% 75% 40%;
    }
    40% {
        border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%;
    }
    60% {
        border-radius: 70% 30% 65% 35% / 80% 45% 55% 20%;
    }
    80% {
        border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%;
    }
    100% {
        border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%;
    }
}


@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(0deg); }
}
#rocket {
    -webkit-animation-name: spaceboots;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px #ffffff, 248px -16.66667px #ffffff, 190px 16.33333px #ffffff, -113px -308.66667px #ffffff, -109px -287.66667px #ffffff, -50px -313.66667px #ffffff, 226px -31.66667px #ffffff, 180px -351.66667px #ffffff, -12px -338.66667px #ffffff, 220px -388.66667px #ffffff, -69px -27.66667px #ffffff, -111px -339.66667px #ffffff, 155px -237.66667px #ffffff, -152px -380.66667px #ffffff, -50px -37.66667px #ffffff, -95px -175.66667px #ffffff, -88px 10.33333px #ffffff, 112px -309.66667px #ffffff, 69px -415.66667px #ffffff, 168px -100.66667px #ffffff, -244px 24.33333px #ffffff, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; }
}


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}


@keyframes cracking {
    0% {
        x: 0px;
        width: 0;
    }
    6% {
        x: 5px;
        width: 0;
    }
    11% {
        x: 5px;
        width: 50px;
    }
    16% {
        x: 5px;
        width: 50px;
    }
    20% {
        x: -20px;
        width: 100px;
    }
    25% {
        x: -20px;
        width: 100px;
    }
    30% {
        x: -30px;
        width: 110px;
    }
    40% {
        x: -40px;
        width: 120px;
    }
    50% {
        x: -50px;
        width: 130px;
    }
    50% {
        x: -60px;
        width: 140px;
    }
    60% {
        x: -70px;
        width: 150px;
    }
    70% {
        x: -80px;
        width: 160px;
    }
    80% {
        x: -90px;
        width: 170px;
    }
    90% {
        x: -95px;
        width: 200px;
    }
    100% {
        x: -100px;
        width: 260px;
    }
}

#eggsvg {
    animation: shaking 10s infinite;
}

@keyframes shaking {
    0% {
        transform: rotate(0deg);
    }
    1% {
        transform: rotate(3deg);
    }
    2% {
        transform: rotate(0deg);
    }
    3% {
        transform: rotate(-3deg);
    }
    4% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(0deg);
    }
    11% {
        transform: rotate(3deg);
    }
    12% {
        transform: rotate(0deg);
    }
    13% {
        transform: rotate(-3deg);
    }
    14% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(3deg);
    }
    22% {
        transform: rotate(0deg);
    }
    23% {
        transform: rotate(-3deg);
    }
    24% {
        transform: rotate(0deg);
    }

}

#path-11 { animation: cracking 20s; }


@keyframes crackout {
    0% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
    10% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
    20% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
    30% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
    35% {
        transform: rotate(0deg);
        transform: translateY(-15px);
    }
    40% {
        transform: rotate(0deg);
        transform: translateY(-10px);
    }
    45% {
        transform-origin: bottom right;
        transform: translateY(-20px);
    }
    50% {
        transform-origin: center center;
        transform: translateY(-15px);
    }
    60% {
        transform-origin: center center;
        transform: translateY(-20px);
    }
    70% {
        transform-origin: bottom right;
        transform: translateY(-25px);
    }
    80% {
        transform-origin: bottom right;
        transform: translateY(-30px);
    }
    90% {
        transform-origin: bottom right;
        transform: translateY(-35px);
    }
    100% {
        transform-origin: bottom right;
        transform: translateY(-40px);
    }
}


@keyframes chickout {
    0% {
        transform: translate(47px, 46px)
    }
    60% {
        transform: translate(47px, 46px)
    }
    100% {
        transform: translate(47px, 26px);
    }
}

#mouth {
    animation: mouthMove 10s infinite;
}

@keyframes mouthMove {
    60% {
        transform: scaleY(1) translateY(-10px);
    }
    80% {
        transform: scaleY(1.5) translateY(-30px);
    }
    100% {
        transform: scaleY(1.2) translateY(-20px);
    }
}