body {
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-image:   LINEAR-gradient( to top right,rgb(0, 191, 255), rgb(255, 151, 255), rgba(108, 29, 255, 0.316),rgb(255, 151, 255),rgb(0, 191, 255));
}

#floating-text {z-index: 150;
   height: 200px;
   width: 400px;
    padding: 20px;
    box-shadow: 5px 5px 17px  rgb(230, 106, 232);
    position: absolute;
    top: 25%;
    left: 800px;
    color: #333;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 10px;
    animation: float 4s ease-in-out infinite;
}
#button{ height: 35px;
width: 200px;
border-radius: 20px 10px 20px 10px;
box-shadow: 5px 5px ;
position: absolute;
top: 50px;
animation-name: up;
animation-duration: 6s;
animation-iteration-count: infinite;
}

#questionbox{
    width: 350px;
    height: 35px;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 10px 10px 5px rgba(0, 191, 255, 0.377) ;
    position: absolute;
    top: 100px;
    left: 40px;
    animation-name: down;
animation-duration: 10s;
animation-iteration-count: infinite;
    
}


#outputDiv{   
    position: absolute;
    top: 160px;
    left: 20%;
    
    animation-duration: 10s;
    animation-name: color, down;
    animation-iteration-count: infinite;
}

#blok1 {
    background-color: blueviolet;
    height: 300px;
    width: 300px;
border-radius: 100000000000000000000000000000px;
position: absolute;
top: 100px;
left:300px;
animation-name: spin;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: 12s;
}
#blok2 {
    background-color: rgb(194, 129, 240);
    height: 200px;
    width: 200px;
    border-radius: 50px;
    position: absolute;
    left: 50px;
    top: 48px;
   transform: rotate(45deg);
z-index: 90;
animation-name: pin;
animation-iteration-count: infinite;
animation-duration: 1ms;

}
#blok3 {
    background-color: rgb(206, 137, 204);
    height: 50px;
    width: 50px;
    border-radius: 100px;
    position: absolute;
    left: 130px;
    bottom: 124px;
    z-index: 100;
}

#blok4{background-color: rgb(27, 148, 27);
height: 295px;
width: 50px;
position: absolute;
    left: 125px;
    top: 258px;
border-radius: 15px 15px 0px 0px;
z-index: -10;
animation-name: trans;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#blok5{background-color: rgb(79, 158, 79);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
    transform: rotate(-40deg);
  top: 235px;
right: 60px;
z-index: -1;
}
#blok6{ background-color: rgb(79, 158, 79);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
   margin: 50px auto;
    transform: rotate(40deg);
    top: 120px;
    left: 50px;
    z-index: -100;
  }
  
#blok7{ background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(150deg);
bottom: 220px;
left: 45px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}

#blok8{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(125deg);
bottom: 475px;
left: 120px;
z-index: 80;
 animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 1s;
}

#blok9{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(100deg);
bottom: 750px;
left: 170px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 2s;
}

#blok10{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(70deg);
bottom: 1030px;
left: 170px;
z-index: 80;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 3s;
}

#blok11{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(30deg);
position: relative;
bottom: 1290px;
left: 110px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 4s;
}

#blok12{background-color: rgb(156, 66, 240);
width: 100px;
height: 150px;
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(0deg);
position: relative;
bottom: 1530px;
right: -30px;
z-index: 80;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 5s;
}

#blok13{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-20deg);
    position: relative;
    bottom: 1720px;
    right: 55px;
    z-index: 80;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 6s;
}

#blok14{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-45deg);
    position: relative;
    bottom: 1875px;
    right: 123px;
    z-index: 80;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 7s;
}

#blok15{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-78deg);
    position: relative;
    bottom: 2000px;
    right: 150px;
    z-index: 80;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 8s;
}

#blok16{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-110deg);
    position: relative;
    bottom: 2120px;
    right: 130px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 9s;
}

#blok17{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-130deg);
    position: relative;
    bottom: 2250px;
    right: 80px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 10s;
}
#blok18{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-170deg);
    position: relative;
    bottom: 2420px;
    right: 10px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 11s;
}

@keyframes example { 0%   {background-color: red;}
10%  {background-color: rgb(255, 115, 0);}
20%  {background-color: rgb(9, 255, 0);}
30% {background-color: rgb(0, 191, 255);}
40% {background-color:rgb(255, 151, 255) ;}
50% {background-color: blueviolet;}
60% {background-color:rgb(255, 151, 255) ;}
70% {background-color: rgb(0, 191, 255);}
80%  {background-color: rgb(9, 255, 0);}
90%  {background-color: rgb(255, 115, 0);}
100%  {background-color: rgb(242, 33, 22);}
}


@keyframes float  {
    0%{transform: translateY(0);}
    50%{transform: translateY(-20px);}
    100%{transform: translateY(0);}
}


@keyframes up { 
    0%{transform: translateY(0);
    }
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0);}
}

@keyframes down
 { 
    0%{transform: translateY(0);
    }
    50%{transform: translateY(30px);}
    100%{transform: translateY(0);}
}

@keyframes color {
    0%{color: red;}
    10%{color: rgb(255, 115, 0);}
    20%{color:rgb(9, 255, 0) ;}
    30% {color: rgb(0, 191, 255);}
    40% {color:rgb(255, 151, 255) ;}
    50% {color: blueviolet;}
    60% {color:rgb(255, 151, 255) ;}
    70% {color: rgb(0, 191, 255);}
    80%  {color: rgb(9, 255, 0);}
    90%  {color: rgb(255, 115, 0);}
    100%  {color: rgb(242, 33, 22);}
}