#container {
    background-image: url(../img/schoen.png);
    width: 750px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

#bootje {
    background-image: url(../img/bootje.png);
    width: 106px;
    height: 113px;
    position: absolute;
    right: -106px;
    bottom: -113px;
    animation: bootje-drijft 10s ease-in-out infinite;
}

@keyframes bootje-drijft {

    75% {
        transform: translate(-240px, -270px) scale(0.9);
    }

    98% {
        transform: translate(200px, -450px) scale(0.7);
    }

}

#veter {
    position: absolute;
    width: 240px;
    height: 160px;
    bottom: 110px;
    left: 225px;
    transform-origin: left;
    animation: veter-stretch 10s ease-in-out infinite;
}

@keyframes veter-stretch {
    70% {
        transform: scale(1.15, 1);
    }

    80% {
        transform: scale(1.3, 0.9);
    }
}

#veter1 {
    background-image: url(../img/veter1.png);
    width: 177px;
    height: 76px;
    bottom: 30px;
    left: 0;
    position: absolute;
}

#veter2 {
    background-image: url(../img/veter2.png);
    width: 79px;
    height: 92px;
    right: 0;
    top: 0;
    position: absolute;
    transform-origin: 10% 90%;
    animation: veter-rotate 10s ease-in-out infinite;
}

@keyframes veter-rotate {

    30% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-15deg);
    }

}



#veter-schaduw {
    background-image: url(../img/veter-schaduw.png);
    width: 81px;
    height: 70px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: 10% 10%;
    opacity: 0.8;
    animation: schaduw-rotate 10s ease-in-out infinite;
}

@keyframes schaduw-rotate {

    30% {
        transform: rotate(-24deg) scaleX(1.1);
        opacity: 1;
    }

    60% {
        transform: rotate(15deg);
    }

}