*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #607d8b;
 
}

/* JC cat sytling */









/* */
.cat__head {
    position: relative;
    width: 230px;
    height: 200px;
    border: 6px solid transparent;
    -webkit-border-radius: 50% 50% 45% 45%;
    border-radius: 50% 50% 45% 45%;
    background: #ffcc80;
    z-index: 20;
}
.cat__head-dots {
    position: absolute;
    left: 101px;
    height: 48px;
    top: 1px;
    width: 14px;
    background: #ffb74d;
    -webkit-border-radius: 0 0 50% 50%;
    border-radius: 0 0 50% 50%;
}

 .cat__head-dots_first {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: -20px;
    border-radius: 50% 0 50% 50%;
}
.cat__head-dots_second {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: 20px;
    border-radius: 0 50% 50% 50%;
}

.cat__ear {
    position: relative;
}
.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -8px;
    width: 150px;
    height: 150px;
    border: 5px solid  transparent;
    border-radius: 90% 0 90% 0;
    background: #ffcc80;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cat__ear--left {
    transform: scale(-1, 1) rotate(170deg);
    left: -14px;
}
.cat__ear--right {
    transform: rotate(170deg);
    left: 94px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
    width: 108px;
    height: 108px;
    border-radius: 90% 0 90% 0;
    background: #e57373;
}
.cat__eye {
    position: absolute;
    top: 35px;
    left: -16px;
    display: flex;
}
.cat__eye--left, .cat__eye--right {
    width: 49px;
    height: 49px;
    background: #fff;
    border-radius: 50%;
    margin: 38px;
    z-index: 100;
}
.cat__eye span {
    position: absolute;
    top: 41px;
    width: 42px;
    height: 42px;
    background: #373737;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::after {
    content: '';
    top: 12px;
    left: 12px;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.cat__eye span.left::after {
    content: '';
    top: 12px;
    left: 5px;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.cat__eye span.up::after {
    content: '';
    top: 5px;
    left: 5px;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

/* .cat__eye span::before {
    content: '';
    top: 20px;
    left: 8px;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}*/
.cat__eye span.pupil-left {
    left: 42px;
}
.cat__eye span.pupil-right {
    left: 166px;
}
.cat__nose {
    position: absolute;
    top: 115px;
    left: 95px;
    width: 0;
    height: 0;
    border-right: 14px solid rgba(255, 255, 255, 0);
    border-left: 14px solid rgba(255, 255, 255, 0);
    border-top: 14px solid #e57373;
    border-radius: 50%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 97px;
    left: 19px;
    background: #fff3e0;
    width: 180px;
    height: 90px;
    -webkit-border-radius: 55% 55% 60% 60%;
    border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 120px;
    width: 23px;
    height: 23px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid  #373737;
    border-right: 3px solid rgba(255, 255, 255, 0);
    border-top: 3px solid rgba(255, 255, 255, 0);
    transform: rotate(-45deg);
}
.cat__mouth-left {
    left: 88px;
}
.cat__mouth-right {
    left: 108px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left::after, .cat__whiskers-right::after, .cat__whiskers-left::before, .cat__whiskers-right::before {
    width: 32px;
    height: 5px;
    border-radius: 50%;
    background: #373737;
}
.cat__whiskers-left::before, .cat__whiskers-right::before, .cat__whiskers-left::after, .cat__whiskers-right::after {
    content: '';
    position: absolute;
    left: 0;
}
.cat__whiskers-left {
    top: 112px;
    left: -18px;
}
.cat__whiskers-left::before {
    top: -16px;
    transform: rotate(15deg);
}
.cat__whiskers-left::after {
    top: 16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right {
    top: 108px;
    left: 205px;
}
.cat__whiskers-right::before {
    top: -16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right::after {
    top: 16px;
    transform: rotate(15deg);
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 54px;
    top: -48px;
    width: 120px;
    height: 120px;
    background: #ffcc80;
    border: 5px solid  transparent;
    border-radius: 50% 50% 40% 40%;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: 30px;
    left: 70px;
    width: 88px;
    height: 35px;
    border-radius: 50%;
    background: #fff3e0;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 24px;
    width: 28px;
    height: 48px;
    background: #ffcc80;
    border: none;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 5;
}

.cat__paw-right_inner {
    content: '';
    position: absolute;
    top: 40px;
    left: 148px;
    width: 35px;
    height: 32px;
    background: #ffcc80;
    border-radius: 45%;
    border: 5px solid transparent;
    z-index: 2;
}

.cat__paw-left_inner {
    content: '';
    position: absolute;
    top: 40px;
    left: 48px;
    width: 35px;
    height: 32px;
    background: #ffcc80;
    border-radius: 45%;
    border: 5px solid transparent;
    z-index: 2;
}
.cat__paw-left {
    left: 78px;
    border-radius: 0 0 45% 35%;
}
.cat__paw-left::after {
    left: -32px;
}
.cat__paw-right {
    left: 122px;
    border-radius: 0 0 35% 45%;
}
.cat__paw-right::after {
    left: 16px;
}
.cat__tail {
    position: absolute;
    top: 20px;
    left: 130px;
    width: 90px;
    height: 23px;
    background: #ffcc80;
    border: 5px solid transparent;
    border-radius: 45%;
    z-index: 1;
    transform: rotate(-45deg);
}
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */