/* CSS for anim.html */
body {
    margin-left: 5%;
    margin-right: 5%;
}

#section1 {
    float: left;
    width: 45%;
    height: 450px;
    background-image: url("izbushka.gif");
    background-repeat: no-repeat;
    animation-name: moving;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

#section2 {
    float: left;
    width: 45%;
    padding: 10px;
    animation-name: colouring;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

#dance {
    background-image: url("baba_yaga.gif");
    background-repeat: no-repeat;
    height: 850px;
    animation-name: moving;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes moving {
    0% {background-position: 5%;}
    25% {background-position: 25%;}
    50% {background-position: 45%;}
    75% {background-position: 65%;}
    100% {background-position: 85%;}
}

@keyframes colouring {
    0% {background-color: green;}
    25% {background-color: blue;}
    50% {background-color: pink;}
    100% {background-color: red;}
}

footer {
    clear: both;
    width: 90%;
    border: 4px inset darkblue;
    border-radius: 14px;
}