/* General styles for the genie */
/*.genie (ORG) {
    width: 100px;*/ /* Width of the genie */
/*height: 300px;*/ /* Height of the genie */
/*background-color: #6a5acd;*/ /* Genie color */
/*position: relative;*/ /* Positioning for the eyes */
/*animation: bounce 3s infinite;*/ /* Bouncing animation */
/*border-radius: 50px;*/ /* Rounded edges for the genie */
/*}*/

.genie {
    width: 100px;
    height: 200px;
    background-color: #33597582;
    position: fixed;
    animation: bounce 7s infinite;
    border-radius: 50px;
    top: 300px;
    left: 30px;
    display: none;
}

    .genie:hover {
        background-color: #335975e0;
    }

    /* Eye styles */
    .eye {
        width: 20px; /* Width of the eyes */
        height: 20px; /* Height of the eyes */
        background-color: white; /* Eye color */
        border-radius: 50%; /* Make them circular */
        position: absolute; /* Positioning for the eyes */
        top: 50px; /* Positioning the eyes */
        left: 40px; /* Positioning the eyes */
        transition: transform 0.2s; /* Smooth transition for eye open */
    }

    /* Second eye */
    .eye.right {
        left: 70px; /* Position the right eye */
    }

#beep-one {
    display: none;
}

/* Bouncing animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px); /* Bounce height */
    }

    60% {
        transform: translateY(-15px); /* Bounce height */
    }
}

/* Follow mouse cursor */
.genie:hover .eye {
    transform: scale(1.5); /* Increase size on hover */
}

/* Eyes open wide on hover */
.genie:hover .eye {
    transform: scale(1.5); /* Enlarging the eyes */
}

/* Responsive design */
@media screen and (max-width: 600px) {
    .genie {
        width: 120px; /* Smaller genie on mobile */
    }
}