#cirkel {
    width: 450px;
    height: 450px;
    border-radius: 450px;
    background-color: yellow;
    position: relative;
    top: 100px;
    left: 450px;
}
#A {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: rgb(0, 0, 0);
    position: relative;
    top: 100px;
    left: 100px;
}
#B {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: rgb(0, 0, 0);
    position: relative;
    left: 260px;
    top: 20px;
}
#C {
    width: 300px;
    height: 150px;
    border-radius: 20px;
    background-color: rgb(255, 0, 0);
    position: relative;
    animation: C1 3s infinite;
    left: 80px;
    top: 80px;
}
#D {
    width: 280px;
    height: 130px;
    border-radius: 20px;
    background-color: rgb(0, 0, 0);
    position: relative;
    animation: D1 3s infinite;
    left: 10px;
    top: 10px;
}
#E {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: E1 3s infinite;
    left: 10px;
    bottom: 180px;
}
#F {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: F1 3s infinite;
    left: 10px;
    bottom: 170px;
}
#G {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: G1 3s infinite;
    left: 55px;
    bottom: 230px;
}
#H {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: H1 3s infinite;
    left: 105px;
    bottom: 290px;
}
#I {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: I1 3s infinite;
    left: 155px;
    bottom: 350px;
}
#Q {
    width: 280px;
    height: 30px;
    border-radius: 15px;
    background-color: rgb(161, 73, 73);
    position: relative;
    animation: Q1 3s infinite;
    left: 10px;
    bottom: 120px; 
}

@keyframes Q1 {
    0% {top: -120px;}
    28% {top: -71px;}
    29%{top: 1000px;}
    100% {top: 1000px;}

}
#W {
    width: 280px;
    height: 30px;
    border-radius: 15px;
    background-color: rgb(161, 73, 73);
    position: relative;
    animation: W1 3s infinite;
    left: 10px;
    bottom: 50px;
}
@keyframes W1 {
    0% {top: -50px;}
    30%{top: -50px;}
    31%{top: 1000px;}
    100% {top: 1000px;}
}

#J {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: J1 3s infinite;
    left: 205px;
    bottom: 410px
}
#K {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: K1 3s infinite;
    left: 250px;
    bottom: 470px
}
#L {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: L1 3s infinite;
    left: 55px;
    bottom: 600px
}
#M {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: M1 3s infinite;
    left: 105px;
    bottom: 660px
}
#N {
    width: 45px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: N1 3s infinite;
    left: 155px;
    bottom: 720px
}
#O {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: O1 3s infinite;
    left: 205px;
    bottom: 780px
}
#P {
    width: 40px;
    height: 60px;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: P1 3s infinite;
    left: 250px;
    bottom: 840px
}

@keyframes D1 {
    0%   {top: 10px; background: rgb(0, 0, 0); height: 120px;}
    100% {top: 0px; background: rgb(0, 0, 0); height: 10px;}
  }

@keyframes C1 {
    0%   {top: 80px; background: red; height: 150px;}
    100% {top: 80px; background: red; height: 20px;}
  }
@keyframes F1 {
    0% {top: -170px;}
    30% {top: -180px;}
    31%{top: 1000px;}
    100% {top: 1000px;}
}
@keyframes G1 {
    0% {top: -230px;}
    30% {top: -240px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes H1 {
    0% {top: -290px;}
    30% {top: -300px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes I1 {
    0% {top: -350px;}
    30% {top: -360px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes J1 {
    0% {top: -410px;}
    30% {top: -420px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes K1 {
    0% {top: -470px;}
    30% {top: -480px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes E1 {
    0% {top: -180px;}
    30% {top: -120px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes L1 {
    0% {top: -600px;}
    30% {top: -540px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes M1 {
    0% {top: -660px;}
    30% {top: -600px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
@keyframes N1 {
    0% {top: -720px;}
    30% {top: -660px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}

@keyframes O1 {
    0% {top: -780px;}
    30% {top: -720px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}


@keyframes P1 {
    0% {top: -840px;}
    30%{top: -780px;}
    31%{top: 1000px;}
    100%{top: 1000px;}
}
#body {
    background-color: rgb(100, 56, 151);
}