style.css

/* Main game container */
.game-container {
    width: 80%;
    margin: 40px auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Status of the pet */
.pet-status {
    margin-bottom: 20px;
}

.pet-status p {
    margin-bottom: 10px;
}

/* Button styles */
.game-actions {
    margin-top: 20px;
}

.game-actions button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
}

.game-actions button:hover {
    background-color: #3e8e41;
}

/* Pet image container */
.pet-image {
    margin-top: 20px;
    position: relative;
    width: 100%;
    height: 200px; /* Define height for the container */
}

/* Style for the turtle image */
.pet-image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: transform 0.5s;
    position: absolute; /* Allows movement */
    top: 0; /* Align the turtle vertically in the middle */
    left: 0;
    right: 0;
    margin: auto; /* Center the turtle horizontally */
}

.pet-image img:hover {
    transform: scale(1.1);
}

/* Linear movement animation for turtle */
@keyframes movePet {
    0% {
        left: calc(100% - 700px); /* Start from the right edge */
    }
    100% {
        left: 0; /* Move to the left edge */
    }
}


.moving {
    animation: movePet 15s linear infinite; /* Slower, linear movement */
}

/* Cat mouse image positioned at bottom-right */
.cat-mouse {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.cat-mouse img {
    width: 300px; /* Adjust the size as necessary */
    height: auto;
}

/* Dog image positioned at bottom-left */
.dog {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.dog img {
    width: 300px; /* Adjust the size as necessary */
    height: auto;
}

/* Animations for pet states */
.hungry {
    animation: hungry 2s infinite;
}

.bored {
    animation: bored 2s infinite;
}

.sick {
    animation: sick 2s infinite;
}

.tired {
    animation: tired 2s infinite;
}

@keyframes hungry {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bored {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes sick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes tired {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}