body {
    background-color: rgb(64, 203, 249);
}

/* pikachu body color */
/* rgb(249,237,124) */
.object {
    position: absolute;
    left: 44%;
    top: 46%;

    animation-name: float;
    animation-duration: 5s; 
    animation-iteration-count: infinite;
}

.pika-head {
    /* RELATIVE BECAUSE IS THE MAIN PART!!!!!!!!!! (OTHER ELEMENTS WONT ALLOW ME TO USE % BUT RATHER PX) */
    position: relative;
    background-color: rgb(249, 237, 124);
    height: 9rem;
    width: 11rem;

    border-radius: 50% 50% 40% 40%;

    z-index: 5;
}

.eye-left {
    position: absolute;
    background-color: rgb(68, 68, 68);
    height: 1.3rem;
    width: 1.3rem;
    border-radius: 50%;

    left: 20%;
    top: 60%;

    /* animation-name: blink;
    animation-duration: 20s; */
    /* animation: infinite; */
    /* animation: blink 20s infinite; */
    animation-name: blink;
    animation-duration: 20s; 
    animation-iteration-count: infinite;
}

.eye-right {
    position: absolute;
    background-color: rgb(68, 68, 68);
    height: 1.3rem;
    width: 1.3rem;
    border-radius: 50%;

    left: 68%;
    top: 60%;
    
    animation-name: blink;
    animation-duration: 20s; 
    animation-iteration-count: infinite;
}

.lefteye-dot {
    position: absolute;
    background-color: rgb(255, 255, 255);
    height: 0.4rem;
    width: 0.4rem;
    border-radius: 50%;
    left: 16%;
    top: 14%;
}

.righteye-dot {
    position: absolute;
    background-color: rgb(255, 255, 255);
    height: 0.4rem;
    width: 0.4rem;
    border-radius: 50%;
    left: 16%;
    top: 14%;
}


.nose {
    position: absolute;
    background-color: rgb(0, 0, 0);
    height: 2px;
    width: 4px;


    left: 48%;
    top: 74%;
}

.left-reddot {
    position: absolute;
    background-color: rgb(230, 90, 65);
    height: 1rem;
    width: 1.5rem;
    border-radius: 50% 70% 100% 100%;
    transform: rotate(220deg);
    left: 6%;
    top: 77%;
}

.right-reddot {
    position: absolute;
    background-color: rgb(230, 90, 65);
    height: 1rem;
    width: 1.5rem;
    border-radius: 70% 50% 100% 100%;
    transform: rotate(138deg);
    left: 80%;
    top: 77%;
}

.ear-left-grey{
    position: absolute;
    background-color: rgb(63, 63, 63);
    height: 7rem;
    width: 2.2rem;
    left: -6%;
    top: -24%;
    transform: rotate(146deg);
    border-radius: 0% 0% 50% 50%;
    z-index: 4;

    animation-name: earwigglel;
animation-duration: 3s; 
animation-iteration-count: infinite;
}

.ear-left-yellow {
    position: absolute;
    background-color: rgb(249, 237, 124);
    height: 5rem;
    width: 2.3rem;
    left: -2%;
    top: -6%;
    transform: rotate(180deg);
    z-index: 4;
    border-radius: 7% 7% 0% 0%;
}
    



.ear-right-grey {
    position: absolute;
    background-color: rgb(63, 63, 63);
    height: 7rem;
    width: 2.2rem;
    left: 83%;
    top: -24%;
    transform: rotate(217deg);
    border-radius: 0% 0% 50% 50%;
    z-index: 4;

    
animation-name: earwiggler;
animation-duration: 3s; 
animation-iteration-count: infinite;
}

.ear-right-yellow {
    position: absolute;
    background-color: rgb(249, 237, 124);
    height: 5rem;
    width: 2.3rem;
    left: -2%;
    top: -6%;
    transform: rotate(180deg);
    z-index: 4;
    border-radius: 7% 7% 0% 0%;
}


/* .ear-left ::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 110%;
    height: 45%;
    background-color: rgb(63, 63, 63);
} */

/* .ear-grey-left {
    position: absolute;
    background-color: rgb(63, 63, 63);
    width: 1.5rem;
    height: 1.5rem;
    left: 14%;
    top: 68%;
    transform: rotate(1deg);
    border-radius: 0% 0% 60% 60%;
    z-index: 5;
} */

.handstl {
    position: absolute;
    width: 20px;
    height: 35px;
    background: rgb(247,230,75);
    border-radius: 0% 0% 50% 50%;
    left: 41px;
    top: 123px;
    z-index: 4;
    transform: rotate(11deg);
}

.handstr {
    position: absolute;
    width: 20px;
    height: 35px;
    background: rgb(247,230,75);
    border-radius: 0% 0% 50% 50%;
    left: 135px;
    top: 123px;
    z-index: 4;
    transform: rotate(347deg);
}

.handsbl {
    position: absolute;
    width: 20px;
    height: 35px;
    background: rgb(247,230,75);
    border-radius: 0% 0% 50% 50%;
    left: 116px;
    top: 193px;
    z-index: -1;
    transform: rotate(6deg);
}

.handsbr {
    position: absolute;
    width: 20px;
    height: 35px;
    background: rgb(247,230,75);
    border-radius: 0% 0% 50% 50%;
    left: 205px;
    top: 193px;
    z-index: -1;
    transform: rotate(342deg);
}



/* Pikachu body___________________________________________________________ */
.pika-body {
    position: absolute;
    width: 168px;
    height: 129px;
    transform: skew(40deg);
    background: rgb(249, 237, 124);
    border-radius: 0% 0% 65% 20%;
    left: 61px;
    top: 84px;
    z-index: -1;
}

.stripe1 {
    position: absolute;
    width: 7px;
    height: 23px;
    background: rgb(156,82,0);
    border-radius: 0% 0% 50% 50%;
    left: 91%;
    top: 15%;
    transform: rotate(75deg);
}

.stripe2 {
    position: absolute;
    width: 7px;
    height: 19px;
    background: rgb(156,82,0);
    border-radius: 0% 0% 50% 50%;
    left: 92%;
    top: 27%;
    transform: rotate(73deg);
}

.tail1 {
    position: absolute;
    width: 23px;
    height: 20px;
    background: rgb(156,82,0);
    transform: rotate(315deg);
    left: 208px;
    top: 116px;
    z-index: -2;
}

.tail2 {
    position: absolute;
    width: 23px;
    height: 55px;
    background: rgb(249, 237, 124);
    border-radius: 15% 15% 15% 0%;
    transform: rotate(315deg);
    left: 211px;
    top: 71px;
    z-index: -2;
}

.tail3 {
    position: absolute;
    width: 35px;
    height: 55px;
    background: rgb(249, 237, 124);
    border-radius: 15% 15% 15% 15%;
    transform: rotate(45deg);
    left: 209px;
    top: 50px;
    z-index: -2;
}

.baloon1 {
    position: absolute;
    width: 90px;
    height: 100px;
    background: rgb(255,165,219);
    border-radius: 50% 50% 50% 50%;
    left: -13%;
    top: -101%;
    z-index: 6;
}

.baloon1-bottom {
    position: absolute;
    width: 24px;
    height: 12px;
    background: rgb(255,165,219);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    left: 37%;
    top: 96%;
    z-index: 6;
}

.baloon-whitedot {
    position: absolute;
    width: 1rem;
    height: 1.5rem;
    background: rgb(255, 255, 255);
    border-radius: 50% 50% 50% 50%;
    left: 9%;
    top: 22%;
    z-index: 6;
}

.baloon2 {
    position: absolute;
    width: 90px;
    height: 100px;
    background: rgb(107,240,255);
    border-radius: 50% 50% 50% 50%;
    left: 8%;
    top: -132%;
    z-index: 6;
}

.baloon2-bottom {
    position: absolute;
    width: 24px;
    height: 12px;
    background: rgb(107,240,255);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    left: 37%;
    top: 96%;
    z-index: 6;
}

.baloon3 {
    position: absolute;
    width: 90px;
    height: 100px;
    background: rgb(230,90,65);
    border-radius: 50% 50% 50% 50%;
    left: 45%;
    top: -100%;
    z-index: 6;
}

.baloon3-bottom {
    position: absolute;
    width: 24px;
    height: 12px;
    background: rgb(230,90,65);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    left: 37%;
    top: 96%;
    z-index: 6;
}

.baloon4 {
    position: absolute;
    width: 90px;
    height: 100px;
    background: rgb(56,142,255);
    border-radius: 50% 50% 50% 50%;
    left: 72%;
    top: -120%;
    z-index: 5;
}

.baloon4-bottom {
    position: absolute;
    width: 24px;
    height: 12px;
    background: rgb(56,142,255);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    left: 37%;
    top: 96%;
    z-index: 6;
}

.baloon-string1 {
    position: absolute;
    width: 1px;
    height: 75px;
    background: rgb(255,255,255);
    left: 17%;
    top: -28%;
    z-index: -1;
    transform: rotate(345deg);
}

.baloon-string2 {
    position: absolute;
    width: 1px;
    height: 85px;
    background: rgb(255,255,255);
    left: 38%;
    top: -58%;
    z-index: 6;
    transform: rotate(350deg);
}

.baloon-string3 {
    position: absolute;
    width: 1px;
    height: 75px;
    background: rgb(255,255,255);
    left: 64%;
    top: -28%;
    z-index: -1;
    transform: rotate(20deg);
}

.baloon-string4 {
    position: absolute;
    width: 1px;
    height: 100px;
    background: rgb(255,255,255);
    left: 85%;
    top: -50%;
    z-index: -1;
    transform: rotate(26deg);
}

/* animation-name: example;
animation-duration: 5s;
} */

@keyframes example {
    0%   { left:0px; top:0px;}
/* 25%  {background-color:black; left:200px; top:0px;}
50%  {background-color:black; left:200px; top:200px;}
75%  {background-color:black; left:500px; top:200px;} */
    100% { left:927px; top:138px;}
} 

@keyframes blink {
	0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% { transform: scaleY(1) }
	10%, 20%, 70% { transform: scaleY(0.1) }
}


@keyframes float {
	0%, 100% { transform: translateY(0) }
	50% { transform: translateY(1.5rem) }
}

@keyframes earwiggler {
	0%{ transform: rotate(217deg) }
	50%{ transform: rotate(225deg) }
    100% {  transform: rotate(217deg) }
}

@keyframes earwigglel {
	0%{ transform: rotate(146deg) }
	50%{ transform: rotate(154deg) }
    100% {  transform: rotate(146deg) }
}

/* animation-name: blink;
animation-duration: 20s; 
animation-iteration-count: infinite; */
.pika-wrapper {
    position: relative;
    width: 20vw;      /* or 20%, or any size you want */
    aspect-ratio: 1 / 1.1;  /* Keeps Pikachu's proportions */
}

/* Ensures the Pikachu drawn with px still scales down */
.pika-wrapper > * {
    transform-origin: top left;
    transform: scale(1);
}

/* You control the size with ONLY width */