body {
      margin: 0;
      padding: 0;
      background-color: #fcf8f8; /* Grau, damit man die weißen Ränder sehen kann */
    }

    .container {
      max-width: 1024px;
      margin: 0px auto; /* zentriert den Container */
      background-color: rgb(215, 228, 195); /* Der eigentliche Inhaltsbereich */
      position:relative;
      height: 100%;
    }

    .circle {
      position: absolute;
      border-radius: 50%;
      animation: float 10s infinite ease-in-out;
    }

    .circle:nth-child(1) {
      width: 100px;
      height: 100px;
      background: #d4daba;
      top: 4em;
      left: 30em;
    }

    .circle:nth-child(2) {
      width: 150px;
      height: 150px;
      background: #e1e457;
      opacity: 0.3;
      top: 10em;
      left: 10em;
    }

    .circle:nth-child(3) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 13em;
      left: 40em;
    }

    .circle:nth-child(4) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 30em;
      left: 30em;
    }

    .circle:nth-child(5) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 40em;
      left: 5em;
    }

    .circle:nth-child(6) {
      width: 110px;
      height: 110px;
      background: #EBD6C7;
      opacity: 0.5;
      top: 40em;
      left: 40em;
    }

    .circle:nth-child(7) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 50em;
      left: 55em;
    }

    .circle:nth-child(8) {
      width: 60px;
      height: 60px;
      background: #68d464;
      opacity: 0.3;
      top: 25em;
      left: 49em;
    }

    .circle:nth-child(9) {
      width: 80px;
      height: 80px;
      background: #d4daba;
      top: 28em;
      left: 12em;
    }

    .circle:nth-child(10) {
      width: 120px;
      height: 120px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 61em;
      left: 10em;
    }

    .circle:nth-child(11) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 50em;
      left: 19em;
    }

    .circle:nth-child(12) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 60em;
      left: 36em;
    }

    .circle:nth-child(13) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 72em;
      left: 3em;
    }

    .circle:nth-child(14) {
      width: 100px;
      height: 100px;
      background: #d4daba;
      top: 74em;
      left: 47em;
    }

    .circle:nth-child(15) {
      width: 150px;
      height: 150px;
      background: #7C9095;
      opacity: 0.3;
      top: 80em;
      left: 10em;
    }

    .circle:nth-child(16) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 83em;
      left: 40em;
    }

    .circle:nth-child(17) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 100em;
      left: 30em;
    }

    .circle:nth-child(18) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 110em;
      left: 5em;
    }

    .circle:nth-child(19) {
      width: 110px;
      height: 110px;
      background: #EBD6C7;
      opacity: 0.5;
      top: 110em;
      left: 40em;
    }

    .circle:nth-child(20) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 120em;
      left: 55em;
    }

    .circle:nth-child(21) {
      width: 60px;
      height: 60px;
      background: #7C9095;
      opacity: 0.3;
      top: 95em;
      left: 49em;
    }

    .circle:nth-child(22) {
      width: 80px;
      height: 80px;
      background: #d4daba;
      top: 98em;
      left: 12em;
    }

    .circle:nth-child(23) {
      width: 120px;
      height: 120px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 120em;
      left: 15em;
    }

    .circle:nth-child(24) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 120em;
      left: 30em;
    }

    .circle:nth-child(25) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 130em;
      left: 36em;
    }

    .circle:nth-child(26) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 142em;
      left: 3em;
    }

    .circle:nth-child(27) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 142em;
      left: 50em;
    }

    .circle:nth-child(28) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 130em;
      left: 36em;
    }

    .circle:nth-child(29) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 142em;
      left: 3em;
    }

    .circle:nth-child(30) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 142em;
      left: 30em;
    }
    
    .circle:nth-child(31) {
      width: 100px;
      height: 100px;
      background: #d4daba;
      top: 144em;
      left: 30em;
    }

    .circle:nth-child(32) {
      width: 150px;
      height: 150px;
      background: #7C9095;
      opacity: 0.3;
      top: 150em;
      left: 10em;
    }

    .circle:nth-child(33) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 153em;
      left: 40em;
    }

    .circle:nth-child(34) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 170em;
      left: 30em;
    }

    .circle:nth-child(35) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 180em;
      left: 5em;
    }

    .circle:nth-child(36) {
      width: 110px;
      height: 110px;
      background: #EBD6C7;
      opacity: 0.5;
      top: 180em;
      left: 40em;
    }

    .circle:nth-child(37) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 190em;
      left: 55em;
    }

    .circle:nth-child(38) {
      width: 60px;
      height: 60px;
      background: #68d464;
      opacity: 0.3;
      top: 165em;
      left: 49em;
    }

    .circle:nth-child(39) {
      width: 80px;
      height: 80px;
      background: #d4daba;
      top: 168em;
      left: 12em;
    }

    .circle:nth-child(40) {
      width: 120px;
      height: 120px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 211em;
      left: 10em;
    }

    .circle:nth-child(41) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 190em;
      left: 19em;
    }

    .circle:nth-child(42) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 200em;
      left: 36em;
    }

    .circle:nth-child(43) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 212em;
      left: 3em;
    }

    .circle:nth-child(44) {
      width: 100px;
      height: 100px;
      background: #d4daba;
      top: 214em;
      left: 47em;
    }

    .circle:nth-child(45) {
      width: 150px;
      height: 150px;
      background: #7C9095;
      opacity: 0.3;
      top: 220em;
      left: 10em;
    }

    .circle:nth-child(46) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 223em;
      left: 40em;
    }

    .circle:nth-child(47) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 240em;
      left: 30em;
    }

    .circle:nth-child(48) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 250em;
      left: 5em;
    }

    .circle:nth-child(49) {
      width: 110px;
      height: 110px;
      background: #EBD6C7;
      opacity: 0.5;
      top: 250em;
      left: 40em;
    }

    .circle:nth-child(50) {
      width: 100px;
      height: 100px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 260em;
      left: 55em;
    }

    .circle:nth-child(51) {
      width: 60px;
      height: 60px;
      background: #7C9095;
      opacity: 0.3;
      top: 235em;
      left: 49em;
    }

    .circle:nth-child(52) {
      width: 80px;
      height: 80px;
      background: #d4daba;
      top: 238em;
      left: 12em;
    }

    .circle:nth-child(53) {
      width: 120px;
      height: 120px;
      background: #d1ebf0;
      opacity: 0.5;
      top: 260em;
      left: 15em;
    }

    .circle:nth-child(54) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 260em;
      left: 30em;
    }

    .circle:nth-child(55) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 270em;
      left: 36em;
    }

    .circle:nth-child(56) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 273em;
      left: 12em;
    }

    .circle:nth-child(57) {
      width: 100px;
      height: 100px;
      background: #e1e457;
      opacity: 0.3;
      top: 282em;
      left: 50em;
    }

    .circle:nth-child(58) {
      width: 70px;
      height: 70px;
      background: #F6B28B;
      opacity: 0.3;
      top: 270em;
      left: 36em;
    }

    .circle:nth-child(59) {
      width: 70px;
      height: 70px;
      background: #e1e457;
      opacity: 0.3;
      top: 282em;
      left: 3em;
    }

    .circle:nth-child(60) {
      width: 70px;
      height: 70px;
      background: #68d464;
      opacity: 0.3;
      top: 282em;
      left: 30em;
    }

    .circle:nth-child(61) {
      width: 80px;
      height: 80px;
      background: #d4daba;
      top: 285em;
      left: 12em;
    }




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