img{

width: 380px;
height: 280px;
margin-right: 20px;
  border: 5px solid purple;
  display: inline-block;
}
div {

 display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
flex-direction: column;
margin-left: 20px;

}
button {
margin-top: 20px;
 display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
width: 100px;
height: 70px;
}
body{

background-color: cornflowerblue;


}

p{

color:aliceblue;
font-size: 20px;

}

.shake{

    animation: shake 0,5s;
}

@keyframes shakeEffect {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(1deg); }
}

/* Wichtig: Inline-Block sorgt dafür, dass transform überhaupt greift */
#bild1, #bild2 {
  display: inline-block;
}

.is-shaking {
  animation: shakeEffect 0.5s ease-in-out;
}