body{
    width: 100vw;
    height: 800px;
    /* background-image: url(https://source.unsplash.com/random/?soul,rhythm);  */
    background-size: cover;
    background-blend-mode: darken;
    /* background-color: blue; */
    text-align: center;
    display: flex;
    align-items: center;
    background-color:#FF0000, #FFFF00, #00CCFF ;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
  }
  
  .wolke {
    width: 400px;
    position: absolute;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: all 1s ease-in-out;
  }
  
  .wolke:hover {
    transform: scale(1.5);
    animation-play-state: paused;
  }
  
  .wolke2 {
    width: 400px;
    position: absolute;
    animation-name: example2;
    animation-duration:5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: all 1s ease-in-out;
  }
  
  .wolke2:hover {
    transform: scale(1.5);
    animation-play-state: paused;
  }
  
  .wolke3 {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  
  }
  
  @keyframes example {
    0%   {left:-400px; top:100px;}
    100% {left:100%; top:100px;}
  }
  
  @keyframes example2 {
    0%   {left:-400px; top:400px;}
    100% {left:100%; top:400px;}
  }
  
  .kreis1 {
      fill: purple;
  }
  
  .kreis2 {
      fill: mediumaquamarine;
  }
  
  .kreis3 {
      fill: orangered;
  }
  
  .kreis4 {
      fill: rgb(31, 74, 167);
  }
  
  .kreis5 {
      fill: rgb(227, 210, 28);
  }
  
  .kreis6 {
      fill: rgb(189, 117, 40);
  }
  
  .kreis7 {
      fill: rgb(31, 167, 97);
  }
  
  .kreis8 {
      fill: rgb(227, 28, 104);
  }
  
  .kreis9 {
      fill: rgb(189, 40, 40);
  }