*{margin:0; padding: 0; box-sizing: border-box;}

html{font-family: "Monserrat", sans-serif; font-size: 62.5%; overflow-x: hidden;}

body{
     background-color: #000;
     color: #fff;
     overflow: hidden;


}

.container{ 
    max-width: 1068px;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative; 
}












.feeling {
    position: relative;
    animation: swing 1s ease infinite;
    transform-origin: 50% 50%;
    position: relative;
    margin: 0px;
    padding: 0px;
   
}




//============== feuerwerk animation ===========

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(100%);
        transform-origin: 50% 50%;
        z-index: 1;
    }

    50% {
        transform: scale(150%);
        transform-origin: 50% 50%;
        z-Index: 1;
    }

    100% {
        transform: scale(100%);
        transform-origin: 50% 50%;
    }
}

@keyframes zoom-out-zoom-in {

    0% {
        transform: scale(150%);
        transform-origin: 50% 50%;
        index: -1;
    }

    50% {
        transform: scale(100%);
        transform-origin: 50% 50%;
    }

    100% {
        transform: scale(150%);
        transform-origin: 50% 50%;
    }
}

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

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

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