style.css

body{
    background-image: url("assets/land.png");
}

.player{
    width: 80px;
    height: 100px;
    background-image: url("assets/player_front.png");
    background-size: 240px 100px;
    background-position: -80px 0;
    position: fixed;
    z-index: 999;
}
.player.active{
    animation: .2s walk linear infinite;
}

@keyframes walk{
    0%, 32%{
        background-position: 0 0;
    }
    33%, 65%{
        background-position: -80px 0;
    }
    66%, 100%{
        background-position: -160px 0;
    }
}

.bush{
    width: 50px;
    height: 40px;
    background-image: url("assets/bush.png");
    background-size: 100% 100%;
    position: fixed;
    z-index: -1;
}

.pokeball{
    width: 30px;
    height: 30px;
    background-image: url("assets/pokeball.png");
    background-size: 100% 100%;
    position: fixed;
}

.score {
    position: fixed; /* Keeps the score in a fixed position on the screen */
    top: 20px; /* Distance from the top of the viewport */
    left: 20px; /* Distance from the left of the viewport */
    font-size: 24px; /* Font size for the score */
    color: white; /* Text color */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    z-index: 1000; /* Ensure it appears above other elements */
}



#timer {
    position: fixed; /* Keeps the timer in a fixed position on the screen */
    top: 20px; /* Distance from the top of the viewport */
    right: 20px; /* Distance from the right of the viewport */
    font-size: 24px; /* Font size for the timer */
    color: white; /* Text color */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    z-index: 1000; /* Ensure it appears above other elements */
}

.level {
    position: fixed; /* Keeps the level display in a fixed position on the screen */
    top: 60px; /* Distance from the top of the viewport */
    left: 20px; /* Distance from the left of the viewport */
    font-size: 24px; /* Font size for the level */
    color: white; /* Text color */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    z-index: 1000; /* Ensure it appears above other elements */
}

    
    .alert-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        padding: 20px;
        width: 300px;
        text-align: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    
    #play-again-btn{
        background-color: #4CAF50;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    #play-again-btn:hover {
        background-color: #3e8e41;
    }