body{
    font-family: "Roboto Mono", monospace;
    background-color: rgb(220, 225, 236);
    background-image: url(web_images/Hintergrund.png);
    background-repeat:no-repeat ;



    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

}
h2 {
    font-weight: 300 ;
}
h4 {
    font-weight: 50 ;
}


a {
    color: black;
    text-decoration: none ;
    font-weight: bold;
}

a:hover {
    color: beige;

}


.quadrat {
    
    width: 360px;
    height: 360px;
    padding-top: 50px;
    padding-left: 60px;
    padding-right: -22px;
    border-radius: 220px;
    background: hsla(350,50%,50%,0.3);
    animation: rotate 20s linear infinite;
    

    float: left;
}

.quadratB {

    width: 10px;
    height: 10px;

    border-radius: 4px;
    background: hsla(53, 15%, 11%, 0.3);
    animation: rotate3 20s linear infinite;
    position: absolute;
    left: 310px;
    top: 1160px;
}

.BLOWUP {
    width: 660px;
    height: 400px;
    position: absolute;
    left: 950px;
    top: 115px;
    opacity:0.;
}

.flyer-noseland {
    width: 330px;
    height: 400px;
    position: absolute;
    left: 1640px;
    top: 115px;
}

.flyer-kulturbrugg {
    width: 660px;
    height: 400px;
    position: absolute;
    left: 950px;
    top: 115px;
}

.text-noseland2024 {
    width: 800px;
    height: 1400px;
    position: absolute;
    left: 50px;
    top: 2300px;
}

.stationen {
    width: 300px;
    height: 500px;
    position: absolute;
    left: 950px;
    top: 100px;
}

.text-2023-HinterDenGleisen {
    width: 1050px;
    height: 1110px;
    position: absolute;
    left: 930px;
    top: 1150px;
}

.wunschgarten-membrande2023 {
    width:1080px;
    height: 1450px;
    position: absolute;
    left: 900px;
    top: 2300px;
}

.schlauch {
    width:1020px;
    height:754px;
    position: absolute;
    left:900px;
    top: 3800px;
}

.wunschgarten {
    width:1920px;
    height: 1760px;
    position: absolute;
    left: 50px;
    top: 4520px;
}


.wegwartestengel {
    width:800px;
    height:1100px;

    left: 1900px;
    top: 2300px;

    float: right;
}


.video-brugg2023 {
    width: 900px;
    height: 900px;
    position: absolute;
    left: 0px;
    top: 1400px;
}

.video-wunschgarten2024 {
    width: 1020px;
    height: 570px;
    position: absolute;
    left: 950px;
    top: 540px;
    opacity:0.7;
}


.video-supermond2024 {
    width: 760px;
    height:760px;
    position: absolute;
    left: 900px;
    top: 3800px;
}

.schlauch {
    width: 1070px;
    height:750px;
    position: absolute;
    left: 900px;
    top: 3800px;
}


.blowup_zimmermannhaus2024 {
    width: 2000px;
    height:1800px;
    position: absolute;
    left: 20px;
    top: 4520px;
}


.end {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 20px;
    top: 4080px;
}

.unterschrift {
    width: 250px;
    height: 40px;
    position: absolute;
    left: 250px;
    top: 4260px;
}


.Ei {
    position: absolute;
    left: 700px;
    top: 410px;
}


.quadrat2 {
    width: 200px;
    height: 200px;
    padding-left: 20px;
    border-radius: 25px;
    background: hsla(259, 50%, 50%, 0.3);
    animation: rotate2 30s linear infinite;
    display: flex;
    align-items: center ;

    float: right;
}
.quadrat3 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: hsla(0, 19%, 84%, 0);
    animation: rotate 50s linear infinite;
    align-items: center ;
    
    float: left;
}


.gruppenbild2023 {
    width: 480px;
    height: 480px;
    border-radius: 240px;
    background: hsla(51, 39%, 51%, 0.34);
    animation: rotate2 70s linear infinite;
    
    float: right;

}

.videoquadrat5 {
    width: 12%;
    height: 12%;
    border-radius: 50%;
    animation: rotate2 30s linear infinite;
    float: left;

}

.aero {
    /*box-shadow: 50px 50px 50px rgb(28, 28, 28);*/
   /* filter: drop-shadow(5px 5px 5px rgb(57, 57, 57) ); */


    offset-path: path('M34.12165,47.77863 C53.914925,47.77863 84.70447,47.77863 106.697,67.57191 C128.68953,87.36519 141.88504,126.95174 137.48654,162.13979 C133.08803,197.32784 111.095505,228.11737 104.49774,258.90692 C97.89999,289.69647 106.697,320.48602 148.4828,340.27927 C190.26862,360.07257 265.0432,368.86957 331.0208,362.27182 C396.9984,355.67404 454.17896,333.68152 478.37076,309.48972 C502.56253,285.29794 493.76553,258.90692 462.97598,236.9144 C432.18643,214.92186 379.4044,197.32784 331.0208,199.52708 C282.63724,201.72635 238.65218,223.71887 192.46786,225.91812 C146.28355,228.11737 97.89999,210.52336 69.3097,195.12859 C40.719406,179.73381 31.922396,166.53828 23.125383,148.94427 C14.328371,131.35023 5.531359,109.35771 1.1328533,91.76369 C-3.265653,74.16967 -3.265653,60.974148 1.1328533,54.37639 C5.531359,47.77863 14.328371,47.77863 34.12165,47.77863 z');
    animation: acht 20s linear infinite; /* linear infinite repetiert */
    width: 150px;
 }

@keyframes acht {
    0% { offset-distance: 0%;}
    100% { offset-distance: 100%;}
}


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }    
}

@keyframes rotate3 {
    0% {
        transform: rotate(25deg);
    }
    50% {
        transform: rotate(-180deg); 
    }    
    100% {
        transform: rotate(25deg);
    } 
}