body {
    background-image: url("../images/christmas_background_small.jpg");
    background-repeat: no-repeat;
}

.stocking {
    width: auto;
    height: 400px;
    padding-bottom: 25px;
    padding-top: 25px;
}

.animate-stocking {
    animation-name: vertical-shake;
    animation-duration: 1.5s;
}

.animate-present {
    animation-name: eject-present;
    animation-duration: 2s;
}

#bb, #w {
    width: auto;
    height: 35px;
    top: 160px;
    padding-right: 50px;
}

/* Animations */
@keyframes vertical-shake {
    0% {
        padding-bottom: 25px;
        padding-top: 25px;
    }
    10% {
        padding-bottom: 25px;
        padding-top: 0px;
    }
    20% {
        padding-bottom: 0px;
        padding-top: 25px;
    }
    30% {
        padding-bottom: 25px;
        padding-top: 0px;
    }
    40% {
        padding-bottom: 0px;
        padding-top: 25px;
    }
    50% {
        padding-bottom: 25px;
        padding-top: 0px;
    }
    60% {
        padding-bottom: 0px;
        padding-top: 25px;
    }
    70% {
        padding-bottom: 25px;
        padding-top: 0px;
    }
    80% {
        padding-bottom: 0px;
        padding-top: 25px;
    }
    90% {
        padding-bottom: 25px;
        padding-top: 0px;
    }
    100% {
        padding-bottom: 25px;
        padding-top: 25px;
    }
}

@keyframes eject-present {
    0% {
        transform: rotate(0deg);
        height: 35px;
        top: 160px;
        z-index: 0;
    }
    50% {
        top: -150px;
        z-index: 0;
    }
    100% {
        transform: rotate(3600deg);
        height: 300px;
        top: 160px;
        z-index: 10;
    }
}