body {
    margin:0;
    width:100vw;
    height:100vh;
    background-color: #3d1d36;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
p {
    width:100%;
    text-align: center;
    font-size: 4vh;
    font-weight: bold;
    color: white
}
.wrapper {
    display: flex;
    justify-content: center;
    position:absolute;
    bottom:0;
    width:100%;
    height:100%;
    align-items:  flex-end;
}
.bouncer {
    bottom:0;
    margin:50px;
    padding:0;
    width:300px;
    height:300px;
    overflow: visible;
    display: flex;
    align-items:  end;
}
.bouncerdelay {
    animation-delay: -0.5s;
}
img {
    position:relative;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    padding:0;
    animation-name: bounce;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;    
    box-shadow: 0px 0px 15px black;
}

@keyframes bounce {
    0% {width:100%; height: 85%; bottom:0%; animation-timing-function: ease-in;}
    25% {height:110%; width:90%; bottom:60%;; animation-timing-function: ease-out;}
    50% {width:100%; height:85%; bottom:100%;; animation-timing-function: ease-in;}
    75% {height:110%; width:90%; bottom:30%;; animation-timing-function: ease-ou;}
    100% {width:100%; height: 85%; bottom:0%;; animation-timing-function: ease-out;}
}