body {
    background-color: rgb(200, 223, 255);
    cursor: url("img/paw2.png"), auto;
}

/*keep cursor size across devices*/
@media (min-resolution: 2dppx) {
    body {
        cursor: url('img/paw2.png'), auto; /* Use higher resolution cursor for high DPI devices */
    }
}

#gameboard {
    height: 600px;
    width: 600px;
    margin: 60px;
    overflow: hidden;
    position: relative;
    cursor: url("img/paw2.png"), auto;
    background-image: url("img/back1.jpg");
    z-index: 1;
    border: 10px solid #333;
    border-radius: 10px;
}

#boxes {
    position: absolute;
    width: 580px;
    left: 10px;
    top: 350px;
    clip-path: ellipse(50% 35% at 50% 50%);

}
#score {
    height: 120px;
    width: 250px;
    position: fixed;
    top: 5px;
    left: 30px;
    padding: 1px 20px;
    color: white;
    font-size: 1em;
    background-color: #e593a3;
    border-radius: 20px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 10px 10px 10px #101010;
    border: 5px solid #333;
    border-radius: 10px;
    z-index: 3;
}

#timebox {
    position: absolute;        /* Makes the div stay in place when scrolling */
    left: 410px;            /* 20px from the right side of the screen */
    top: 690px;              /* 20px from the top of the screen */
    background-color: white; /* Background color for the box */
    padding: 10px;          /* Padding inside the box */
    border-radius: 10px;    /* Rounded corners */
    border: 2px solid #333; /* Border around the box */
    font-family: Arial, sans-serif; /* Set the font */
    font-size: 1.5em;       /* Font size for readability */
    color: #e593a3;           /* Text color */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.7); /* Adds a shadow for a 3D effect */
    z-index: 3;
}

#instructions {
    position: absolute;        /* Makes the div stay in place when scrolling */
    left: 720px;            /* 20px from the right side of the screen */
    top: 420px;              /* 20px from the top of the screen */
    background-color: #e593a3; /* Background color for the box */
    padding: 1px 20px;          /* Padding inside the box */
    border-radius: 20px;    /* Rounded corners */
    border: 5px solid #333; /* Border around the box */
    font-family: Arial, sans-serif; /* Set the font */
    font-size: 0.9em;       /* Font size for readability */
    color: #ffffff;           /* Text color */
    box-shadow: 10px 10px 10px; /* Adds a shadow for a 3D effect */
    z-index: 3;
    max-width: 300px;
    word-wrap: break-word;
}

#object1 {
    position: absolute;
    transition: 1s;
    left: -100px;
    top: 370px;
    rotate: 50deg;
    animation-name: cricketpath;
    animation-duration: 7s;
    animation-play-state: paused;
    animation-iteration-count: infinite;
}



#object2 {
    position: absolute;
    transition: 1s;
    left: 270px;
    top: 400px;
    animation-name: mousepath;
    animation-timing-function: steps(1, jump-none), cubic-bezier(0.5, 0, 0.5, 1); /* Adjusts speed */
    animation-duration: 7s;
    scale: 0.7;
    opacity: 0.01;
    animation-play-state: paused;
    animation-iteration-count: infinite;
}


#object3 {
    position: absolute;
    transition: 1s;
    left: 600px;
    top: 200px;
    animation-name: stinkybugpath;
    animation-duration: 9s;
    animation-play-state: paused;
    animation-iteration-count: infinite;
    
}



#jump {
    position: fixed;  
    left: 700px;         
    top: 100px;  
    height: auto;
    width: 400px;
}

#pounce{
    position: fixed;
    left: 920px;
    top: 380px;
    height: 500px;
    width: auto;
}
#walk{
    position: fixed;
    left: 8px;
    top: 680px;
    height: 180px;
    width: auto;
}

@keyframes mousepath {
    0% {
        margin-top: 0px;
        scale: 1;
        opacity: 0.01;
    }

    10% {
        margin-top:60px;
        scale: 1;
        opacity:1
    }

    20% {
        margin-left: 80px;
        margin-top: 80px;
        scale: 1;
        opacity: 1;
    }

    30% {
       margin-top: 0px;
        scale: 0.1
    }

    40% {
        margin-left: 40px;
        margin-top: 80px;
        scale: 1;
        rotate: 90deg;
    }

    50% {
        margin-left: -200px;
        margin-top: 100px;
        rotate: 90deg;
        scale: 1;
    }

    60% {
        margin-top: 120px;
        margin-left: 400px;
        rotate: 270deg;
        scale: 1;
    }

    70% {
        margin-left: 200px;
        margin-top: 0px;
        rotate: 270deg;
    }

    80% {
        margin-top: -300px;
        margin-left: 200px;
        scale: 0.7;
    }

    90% {
        margin-top: 0px;
        scale: 0.7;
    }

    100% {
        margin-top: 0px;
        scale: 1;
        opacity: 1;
    }
}

@keyframes cricketpath {
    0% {
        margin-top: 0px;
        scale: 1;
    }

    10% {
        margin-left: 200px;
        margin-top: -300px;
    }

    20% {
        margin-left: 250px;
        margin-top: 150px;
        scale: 1;
    }

    30% {
        margin-left: 250px;
        margin-top: 150px;
        scale: 1;
    }

    40% {
        margin-top: -300px;
        margin-left:400px ;
        scale: 0.7;
    }

    50% {
        margin-left: 400px;
        margin-top: 100px;
        scale: 1;
    }

    60% {
        margin-left: 400px;
        margin-top: 100px;
        scale: 1;
    }

    70% {
        margin-left: 550px;
        margin-top: -300px;
        rotate: 90deg;
    }

    80% {
        margin-left: 650px;
        margin-top: 50px;
        scale: 1.2;
        rotate: 180deg;
    }

    90% {
        margin-top: 50px;
        margin-left:650px;
        scale: 1.2;
    }

    100% {
        margin-top: -500px;
        margin-left: -50px;
        rotate: 180deg;
        scale: 1;
    }
}

@keyframes stinkybugpath {
    0% {
        margin-top: 200px;
        margin-left: 600;
        scale: 1;
        rotate: -30deg;
    }

    10% {
        margin-left: 600px;
        margin-top: 200px;
    }

    20% {
        margin-top: 550px;
        margin-left: 200px;
    }

    30% {
        margin-left: 170px;
        margin-top: 500px;
        rotate: -60deg;
    }

    40% {
        margin-top: -100px;
        margin-left: 50px;
        rotate: 180deg;
    }

    50% {
        margin-left: -80px;
    }

    60% {
        margin-top: 120px;
    }

    70% {
        margin-left: -300px;
        margin-top: 120px;
    }

    80% {
        margin-left: -300px;
        margin-top: 70px;
    }

    90% {
        margin-left: -500px;
        margin-top: 300px;
    }

    100% {
        
        margin-top: -500px;
        margin-left: 300px;
        scale: 1;
    }
}


/* Hover effect that doesn't reset animations */
#object1:hover,
#object2:hover,
#object3:hover {
    border: 3px solid #ffcc00;
    border-radius: 100px;
    transition: border 0.1s ease, filter 0.1s ease;
}