.t-rex {
    margin:0;
    width:9px;
    height:9px;
    position:absolute;
    left:44%;
    top:400px;
    animation:
        move 400ms steps(1) infinite,
        run 1.8s linear;
    box-shadow:
        0px -9px 0 0 #535353,
        9px 0 0 0 #535353,
        -18px 0 0 0 #535353,
        -27px 0 0 0 #535353,
        -27px -9px 0 0 #535353;
}

.t-rex::before {
    content:'';
    width:9px;
    height:9px;
    margin:-171px 0 0 27px;
    display:block;
    box-shadow:
        0px 18px 0 18px #535353,
        10px 9px 0 18px #535353,
        50px 14px 0 13px #535353,
        44px 1px 0 10px #535353,
        -9px 54px 0 9px #535353,
        -1px 89px 0 10px #535353,
        -4px 58px 0 13px #535353,
        -36px 99px 0 27px #535353,
        -27px 54px 0 0 #535353,
        -36px 72px 0 9px #535353,
        45px 45px 0 0 #535353,
        36px 45px 0 0 #535353,
        27px 45px 0 0 #535353,
        18px 45px 0 0 #535353,
        18px 72px 0 0 #535353,
        27px 72px 0 0 #535353,
        27px 81px 0 0 #535353,
        -5px 112px 0 5px #535353,
        -23px 139px 0 5px #535353,
        -18px 153px 0 0 #535353,
        -54px 135px 0 9px #535353,
        -36px 135px 0 0 #535353,
        -54px 153px 0 0 #535353,
        -63px 153px 0 0 #535353,
        -63px 99px 0 18px #535353,
        -72px 126px 0 0 #535353,
        -90px 108px 0 0 #535353,
        -90px 90px 0 9px #535353,
        -90px 90px 0 9px #535353,
        -108px 81px 0 0 #535353,
        -90px 72px 0 0 #535353,
        -99px 72px 0 0 #535353,
        -99px 63px 0 0 #535353,
        -108px 72px 0 0 #535353,
        -108px 63px 0 0 #535353,
        -108px 54px 0 0 #535353,
        -108px 45px 0 0 #535353;
}

@keyframes move {
    0%, 100% {
        margin-top:9px;
        box-shadow:
            9px -9px 0 0 #535353,
            18px 0px 0 0 #535353,
            27px -9px 0 0 #535353,
            -45px 0px 0 0 #535353,
            -45px -18px 0 0 #535353,
            -54px -9px 0 0 #535353,
            -72px -9px 0 0 #6E6E6E,
            -90px 0px 0 0 #6E6E6E,
            -99px -18px 0 0 #6E6E6E
    }

    50% {
        margin-top:0px;
        box-shadow:
            0px -9px 0 0 #535353,
            9px 0 0 0 #535353,
            -18px 0 0 0 #535353,
            -27px 0 0 0 #535353,
            -27px -9px 0 0 #535353;
    }
}

@keyframes run {
    from {
        left: -100%;
    }
}

/* Mobile */
@media only screen and (max-width: 600px) {
    .t-rex {
        top:490px;
    }
}


@keyframes hide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

header .callout .puny-rocket {
    opacity: 0;
    animation: 
        rocket-shake 1s ease-in-out alternate infinite,
        hide 2s steps(1);
}

header .callout .rocket-wrapper::before {
    opacity: 0;
    animation: hide 2s steps(1);
}