html {
    height: 100%;
}


#luna-wrapper {
    transform: scale(.75);
    margin: 50px auto 0;
    width: 800px;
}

#luna {
    width: 800px;
    position: relative;
    animation: 15s linear infinite oscillate;
}

#luna-hat {
    background: url(../img/hat.png) 0 0 no-repeat;
    background-size: 342px auto;
    width: 342px;
    height: 225px;
    position: absolute;
    top: -175px;
    animation: 10s ease-in-out infinite bounce-hat;
    z-index: 5;
}

#luna-body {
    background: urL(../img/luna-body.png) 0 0 no-repeat;
    background-size: 800px auto;
    width: 800px;
    height: 600px;
    position: relative;
}

#luna-hair {
    width: 360px;
    height: 420px;
    background: url(../img/luna-hair.png) 0 0 no-repeat;
    background-size: 360px auto;
    position: absolute;
    top: 293px;
    left: -7px;
}

#luna-chair {
    position: absolute;
    top: 375px;
    left: 150px;
    width: 450px;
    height: 460px;
    background: url(../img/luna-chair.png) 0 0 no-repeat;
    background-size: 450px auto;
    animation: 8s ease-in-out infinite bounce;
}

#luna-wand {
    background: url(../img/wand.png) 0 0 no-repeat;
    background-size: 230px auto;
    width: 230px;
    height: 195px;
    top: -60px;
    left: 400px;
    position: absolute;
    animation: 7s linear infinite oscillate-small;
}

@keyframes bounce-hat {
    50% {
        transform: translate(0, 30px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes bounce {
    50% {
        transform: translate(0, 15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes oscillate-small {
    13% {
        transform: translate(5px, -2.5px);
    }
    25% {
        transform: translate(10px, 0);
    }
    38% {
        transform: translate(12.5px, 5px);
    }
    50% {
        transform: translate(10px, 10px);
    }
    63% {
        transform: translate(5px, 12.5px);
    }
    75% {
        transform: translate(0, 10px);
    }
    88% {
        transform: translate(-2.5px, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes oscillate {
    13% {
        transform: translate(10px, -5px);
    }
    25% {
        transform: translate(20px, 0);
    }
    38% {
        transform: translate(25px, 10px);
    }
    50% {
        transform: translate(20px, 20px);
    }
    63% {
        transform: translate(10px, 25px);
    }
    75% {
        transform: translate(0, 20px);
    }
    88% {
        transform: translate(-5px, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}