* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(
        85vw 60vh at 90% -5%,
        #282949 0%,
        #1f2147 50%,
        #0e0e1d 70%),
        #676db5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
    position: relative;
    width: min(950px, 85vw);
    height: min(650px, 75vh);
    background: linear-gradient(to right, #0b0c1b, #0f1020);
    border-radius: 1rem;
    border: .1rem solid #000;
    overflow: hidden;
}

.moon {
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    top: 2%;
    right: 2%;
    background-color: #fff;
    box-shadow: 0 0 20px #fff;
    z-index: 1;
}

.ground {
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 25%;
    background-color: #090a14;
    z-index: 1;
}

.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px #fff;
}

.cat {
    --primary_color: #2e2441;
    --secondary_color: #211a2e;
    position: absolute;
    width: 15rem;
    height: 10rem;
    bottom: 15%;
    left: 60%;
    transform: translateX(-50%);
    z-index: 1;

    animation: bob 3s ease-in-out infinite;
}

.head {
    position: relative;
    background-color: var(--primary_color);
    width: 4.5rem;
    height: 4.35rem;
    border-radius: 40%;
    animation: headTilt 4s ease-in-out infinite;
    z-index: 2;
}

.ear_Left {
    position: absolute;
    background-color: var(--secondary_color);
    width: 1.68rem;
    height: 1.68rem;
    border-radius: .3rem;
    bottom: 85%;
    left: 1%;
    transform: rotate(45deg);
    animation: earLeftTwitch 3s ease-in-out infinite;
    z-index: 2;
}

.ear_Right {
    position: absolute;
    background-color: var(--secondary_color);
    width: 1.68rem;
    height: 1.68rem;
    border-radius: .3rem;
    bottom: 85%;
    left: 17.7%;
    transform: rotate(45deg);
    animation: earRightTwitch 3s ease-in-out infinite;
    z-index: 2;
}

.eye_Left {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    bottom: 72%;
    left: 5.5%;
    z-index: 3;
    animation: blink 5s ease-in-out infinite;
}

.eye_Right {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    bottom: 72%;
    left: 17%;
    z-index: 3;
    animation: blink 5s ease-in-out infinite;
}

.pupil_Left {
    position: absolute;
    background-color: #000;
    width: .5rem;
    height: .8rem;
    border-radius: 1rem;
    z-index: 4;
}

.pupil_Right {
    position: absolute;
    background-color: #000;
    width: .5rem;
    height: .8rem;
    border-radius: 1rem;
    z-index: 4;
}

.nose {
    position: absolute;
    background-color: #ffb6c1;;
    width: .7rem;
    height: .4rem;
    border-radius: 1rem 1rem 2rem 2rem ;
    bottom: 69%;
    left: 12.7%;
    z-index: 3;
}

.whiskers {
    position: absolute;
    background-color: #fff;;
    width: 3rem;
    height: .01rem;
    bottom: 71.5%;
    left: .75rem;
    z-index: 3;
}

.whiskers::before,
.whiskers::after {
    content: '';
    position: absolute;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
    width: 4rem;
    height: .03rem;
    left: -.5rem;
}

.body {
    position: relative;
    background: linear-gradient(to bottom, #2c223d, #1e1727);
    width: 8.5rem;
    height: 4.5rem;
    bottom: 12%;
    left: 10%;
    border-radius: 1.5rem;
    z-index: auto;
}

.leg_Left {
    position: relative;
    background-color: #1e1727;
    width: 1.7rem;
    height: 3.2rem;
    bottom: -60%;
    left: 10%;
    border-radius: 1.5rem;
    animation: legMove 2s ease-in-out infinite;
}

.leg_Right {
    position: relative;
    background-color: #1e1727;
    width: 1.7rem;
    height: 3.2rem;
    bottom: 10%;
    left: 55%;
    border-radius: 1.5rem;
    animation: legMove 2s ease-in-out infinite;
}

.tail {
    position: relative;
    background: linear-gradient(to right, #2c223d, #1e1727);
    width: 3.2rem;
    height: 1rem;
    bottom: 120%;
    left: 85%;
    border-radius: 1.5rem;
    transform: rotate(-20deg);
    animation: tailWag 2s ease-in-out infinite;
    z-index: -1;
}

.collar{
    position: relative;
    background-color: #98facc;
    width: 5rem;
    height: .5rem;
    bottom: 135%;
    left: -13%;
    border-radius: 1.5rem;
}

.bell {
    position: relative;
    background-color: #ffd2a3;
    box-shadow: 0 0 20px #e38017;
    width: .7rem;
    height: .7rem;
    left: 50%;
    transform: translate(-50%, 50%);
    border-radius: 1.5rem;
}

.bubble {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-size: .7rem;
    width: 4rem;
    height: 2.5rem;
    top: -100%;
    left: 50%;
    border-radius: 1rem;
    transition: all 1s ease;
    z-index: 2;
    opacity: 0;
}

.bubble::after {
    content: '';
    position: absolute;
    bottom: 32%;
    left: 25%;
    width: 0;
    height: 0;
    border: 1rem solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
    border-left: 0;
    margin-left: -.7rem;
    margin-bottom: -1.2rem;
}

.cat:hover .bubble {
    opacity: 1;
}

@keyframes bob {
    0%, 100%{
        transform: translateX(-50%) translateY(0%);
    }
    50%{
        transform: translateX(-50%) translateY(-5%);
    }
}

@keyframes headTilt {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(8deg);
    }
    75% {
        transform: rotate(-8deg);
    }
}

@keyframes earLeftTwitch {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(35deg);
    }
}

@keyframes earRightTwitch {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-35deg);
    }
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes legMove {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5%);
    }
}

@keyframes tailWag {
    0%, 100% {
        transform: rotate(-20deg);
    }
    25% {
        transform: rotate(-30deg);
    }
    75% {
        transform: rotate(-10deg);
    }

}