/* Minimal layout centering */
body {
    margin: 0;
    padding: 0;
    background-color: #111111; /* Sleek dark background */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.container {
    padding: 10px;
}

h1 {
    font-size: 2rem;
    margin: 20px 0 10px;
    letter-spacing: 1px;
}

p {
    color: #888888;
    margin: 0;
}

/* Updated Sprite Engine */
.sprite {
    width: 64px;          /* Width of exactly ONE frame */
    height: 64px;         /* Height of your sprite */
    margin: 0 auto;
    background: url('sprinter.png') no-repeat 0px center;
    
    /* 
       Changed to steps(1) running through a 100% loop cycle.
       Adjust 0.4s to make the animation faster or slower.
    */
    animation: playSprite 0.4s steps(1) infinite;
    image-rendering: pixelated; 
}

/* Corrected Keyframe Sequence */
@keyframes playSprite {
    0%, 100% { 
        background-position: 0px center; 
    }
    50% { 
        background-position: -64px center; /* Pulls frame 2 perfectly into view */
    }
	/* Styling for the 404 back link */
.home-link {
    color: #0070f3; /* Clean tech blue */
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px dashed #0070f3;
    transition: color 0.2s ease;
}

.home-link:hover {
    color: #3291ff;
    border-bottom-style: solid;
}

/* Styling for the 404 back link */
.home-link {
    color: #0070f3; /* Clean tech blue */
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px dashed #0070f3;
    transition: color 0.2s ease;
}

.home-link:hover {
    color: #3291ff;
    border-bottom-style: solid;
}

/* 
   Optional: Makes the exact same sprite look different on the 404 page.
   This rotates the colors (hue) and slows down the animation to look confused.
*/
.lost-sprite {
    filter: hue-rotate(90deg); /* Shifts the colors of your png dynamically */
    animation-duration: 0.8s;    /* Slows down the 2-frame cycle */
}


}
