body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: black;
    background: #fff9f9;
}

#main {
    overflow: hidden;
}

#container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

#title {
    font-family: 'Rowdies', cursive;
    color: #ffffff;
    font-size: 100px;
    line-height: 120px;
    z-index: 1;
    position: relative;
    padding-top: 67px; 
}

#head-text {
    color: #000;
    font-size: 150px;
    line-height: 180px;
    z-index: 1;
    position: relative;
    margin-top: 282px; 
    left: 400px;
}

#head-text-addit {
    color: #02042e;
    font-size: 150px;
    line-height: 180px;
    z-index: 1;
    position: relative;
    margin-top: 25px; 
    left: -200px;
}

#circle1 {
    position: absolute;
    width: 946px;
    height: 946px;
    left: -175px;
    top: -541px;
}

#image {
    margin: 334px auto 0 auto;
    max-width: 626px;
    height: 417px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    
}

#white {
    color: #fff;
    position: absolute;
    z-index: 1;
    margin-top: 220px;
    top: 418px;
    left: -287px;
    width: 1200px;
    text-align: center;
    font-size: 150px;
    line-height: 180px;
    
}

#black {
    color: #000;
    position: relative;
    z-index: 1;
    margin-top: 220px;
    text-align: center;
    font-size: 150px;
    line-height: 180px;
    
}

#last-image {
    margin-top: 54px;
    margin-bottom: 100px;
}

#last-image img {
   max-width: 100%;
    z-index: 1;
    position: relative;
}

.circle {
    background: #ed0869;
    border-radius: 50%;
}

#scene1 {
    position: absolute;
    right: 143.63px;
    top: 145.57px;  
}

#scene1 .circle {
    width: 52.88px;
    height: 52.88px;
    
}

#scene2 {
    position: absolute;
    left: 447px;
    top: 479px;  
}

#scene2 .circle {
    width: 83px;
    height: 83px;  
}

#scene3 {
    position: absolute;
    left: -148px;
    top: 635px;   
}

#scene3 .circle {
    width: 346px;
    height: 346px;
    background: rgba(105, 51, 220, 0.06); 
}

#scene4 {
    position: absolute;
    right: -263px;
    top: 307px;  
}

#scene4 .circle {
    width: 674px;
    height: 674px;
    background: rgba(105, 51, 220, 0.06);  
}

#scene5 {
    position: absolute;
    right: 100px;
    top: 784.4px;   
}

#scene5 .circle {
    width: 119.44px;
    height: 119.44px;   
}

#scene6 {
    position: absolute;
    right: 257.7px;
    top: 1082.79px;  
}

#scene6 .circle {
    width: 53.5px;
    height: 53.5px;  
}

#scene7 {
    position: absolute;
    right: 153px;
    top: 1168px;  
}

#scene7 .circle {
    width: 276px;
    height: 276px;
    background: rgba(105, 51, 220, 0.06);  
}

#scene8 {
    position: absolute;
    right: -71px;
    top: 1303px;  
}

#scene8 .circle {
    width: 168px;
    height: 168px;  
}

#scene9 {
    position: absolute;
    left: -103px;
    top: 1444px;  
}

#scene9 .circle {
    width: 206px;
    height: 206px;  
}

#scene10 {
    position: absolute;
    right: -110px;
    top: 1615px;  
}

#scene10 .circle {
    width: 220px;
    height: 220px;
    background: rgba(105, 51, 220, 0.06);  
}

#scene11 {
    position: absolute;
    left: -534px;
    top: 1363px;  
}

#scene11 .circle {
    width: 1450px;
    height: 1450px;
    background: rgba(105, 51, 220, 0.06);  
}

#scene12 {
    position: absolute;
    left: 304px;
    top: 1898px;  
}

#scene12 .circle {
    width: 108px;
    height: 108px;  
}

#scene13 {
    position: absolute;
    left: 668px;
    top: 1952px;  
}

#scene13 .circle {
    width: 66px;
    height: 66px;  
}

img {
    max-width: 100%;

}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;

    padding: 0 20px;
}

.col-12 {
    grid-column: 1/-1;
}

.col-2 {
    grid-column: span 2;
}

.col-4 {
    grid-column: span 4;
}



@media only screen and (min-width:600px) {

    .grid-container {
        grid-template-columns: repeat(8, 1fr);
    }

    /* CSS für Tablet und Desktop */




    /* CSS für Tablet und Desktop */
}


@media only screen and (min-width:1200px) {

    .grid-container {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1180px;
        margin: 0 auto;
        padding: 0;
    }

    /* CSS für Desktop */






    /* CSS für Desktop */
}
