/* style.css */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background: black;
}

img {
    height: 500px;
    width: 500px;
    position: absolute;
}

/* First image animation */
img:nth-child(1) {
    animation: bounce1 20s infinite linear;
}

@keyframes bounce1 {
    0% { top: 0; left: 0; }
    20% { top: calc(100vh - 500px); left: calc(100vw - 500px); }
    40% { top: calc(100vh - 500px); left: calc(100vw - 500px); }
    60% { top: calc(100vh - 500px); left: calc(100vw - 500px); }
    80% { top: calc(100vh); left: calc(100vw); }
    100% { top: 0; left: 0; }
}

/* Second image animation with different timing and positions */
img:nth-child(2) {
    animation: bounce2 15s infinite linear;
}

@keyframes bounce2 {
    0% { top: calc(100vh * 0.5); left: calc(100vw * 0.5); }
    20% { top: calc(100vh * 0.1); left: calc(100vw * 0.9 - 500px); }
    40% { top: calc(100vh * 0.8 - 500px); left: calc(100vw * 0.2); }
    60% { top: calc(100vh * 0.3); left: calc(100vw * 0.7 - 500px); }
    80% { top: calc(100vh * 0.6 - 500px); left: calc(100vw * 0.4); }
    100% { top: calc(100vh * 0.5); left: calc(100vw * 0.5); }
}