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

body {
    background-color: #FFEBEB; 
    background-size: 400% 400%; 
    animation: gradientAnimation 5s ease infinite; 
    overflow: hidden; 
    position: relative;
    height: 100vh;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.container {
    position: absolute;
    bottom: 220px; 
    left: 350px;
    animation: drive 10s linear forwards, shake 0.2s ease-in-out infinite alternate;
    filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.5)); 
    z-index: 9999;
}

.car {
    width: 600px; 
    display: block;
}

.kola {
    width: 100%; 
    height: 100%;
}

.wheel {
    position: absolute;
    
     transform-origin: 50% 50%; 
     
}


.tylnie {
    width: 75px;  
    height: 80px;
    left: 100px;  
    bottom: 115px; 
    transform-origin:center;
}

.przednie {
    width: 75px;  
    height: 80px;
    left: 438px; 
    bottom: 121px; 
}


.tylnie, .przednie {
    animation: 
        rotateWheels 1.5s linear 3.3,  
        stopWheels 3s linear 5s,  
        rotateWheels 1.5s linear 10 7s; 
}


@keyframes drive {
    0% { left: -350px; }
    50% { left: 30vw; } 
    70% { left: 30vw; } 
    100% { left: 100vw; } 
}

@keyframes shake {
    from { transform: translateY(0px); }
    to { transform: translateY(-1px); }
}

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

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



.hearts-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.heart {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -30px; 
    animation: fall 1.5s linear infinite, float 3s ease-in-out infinite; 
}


.heart-icon {
    width: 100%;
    height: 100%;
}


@keyframes fall {
    0% {
        top: -30px;
        left: 10%;
        opacity: 1;
    }
    100% {
        top: 100vh;
        left: 90%;
        opacity: 0;
    }
}


@keyframes float {
    0% {
        left: 10%;
    }
    50% {
        left: 50%;
    }
    100% {
        left: 90%;
    }
}


.heart:nth-child(1) {
    animation-delay: 0s, 0s;
}

.heart:nth-child(2) {
    animation-delay: 0.5s, 0.5s;
}

.heart:nth-child(3) {
    animation-delay: 1s, 1s;
}

.heart:nth-child(4) {
    animation-delay: 1.5s, 1.5s;
}

.heart:nth-child(5) {
    animation-delay: 2s, 2s;
}

.heart:nth-child(6) {
    animation-delay: 2.5s, 2.5s;
}