
.EDGARRUN {
    animation: none; /* Deaktiviere die CSS-Animation zunächst */
    position: absolute;
    top: 700px;
    left: -150px; /*Positionierung vorerst außerhalb des Bildes links*/
    height: 200px;
    width: auto;
}

@keyframes edgarrun { /*definiert von wo nach wo Edgar laufen soll*/
    from { 
        left: -120px;
    } 
    to { 
        left: 20px;
    }
   
}



.objekt { /* definiert Größe der Objekte Hammer, Helm und Pinsel, auf Objekten hat man den "hand"cursor */
    position: absolute;
    cursor: pointer;
	height: 35px;
	width: auto;
}

.hammer { top: 720px; left: 970px; } /*Positionierung von Unterschiedlichen Wimmelbildobjekten im Bild*/
.helm { top: 600px; left: 50px; }
.pinsel { top: 610px; left: 500px; }


/*Diese Keyframes geben an, von wo nach wo sich die Objekte bwegen sollen (auf Edgar Tasche)*/
@keyframes moveHammer {
    from { top: 720px; left: 970px; } 
    to { top: 825px; left: 70px; } 
}

@keyframes movePinsel {
    from { top: 610px; left: 500px; } 
    to { top: 825px; left: 70px; }
}
@keyframes moveHelm {
    from { top: 600px; left: 50px; } 
    to { top: 825px; left: 70px; } 
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}