:root{
    --cat-eye-color: radial-gradient( #000000 10%, #000000 20%, #18c42c 30%, #02ff1f 100%);
}
*{
    color: #000;
}
h1, h2{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

#Message_for_user{
    text-align: center;
    font-weight: 900;
}
    
/* Cat */
.cat-head {
  position: absolute;
  right: 0;
  left: 0;
  top: -8rem;
  bottom: 2rem;
  margin: auto;
  background: linear-gradient(#643737 85%, #633232 20%);
  width: 205px;
  height: 180px;
  border: .2rem solid #000;
  border-radius: 46%;
  transition: transform 3s ease-in 0ms;
  align-items: center;
  z-index: 1;
  
}
.cat-head:active{
    transform: scale(2);
    
    
}


.cat-left-ear, .Right-ear{
    
    z-index: 2;
    border-top-left-radius: 90px;
    border-top-right-radius: 10px;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 70px solid #522929;
    
    top: -26px;
}
.cat-left-ear {
    position: absolute;
   
    left: -31px;
    transform: rotate(-45deg);

}
.Right-ear {
  position: absolute;
 
  right: -31px;
    transform: rotate(45deg);

}

.inner-right{
    position: absolute;
    top: 21px;
    right: -12px;
    width: 20px;
    height: 40px;
    border-radius: 59%;
    background: linear-gradient(#a844a0 100%, #633232 20%);
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 70px solid #f30000;    
    border: 1px solid #b33aa8;
    z-index: 2;
}

.inner-left{
    position: absolute;
    top: 21px;
    right: -12px;
    width: 20px;
    height: 40px;
    border-radius: 59%;
    background: linear-gradient(#a844a0 100%, #633232 20%);
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 70px solid #f30000;    
    border: 1px solid #b33aa8;
    z-index: 2;
}

.eyes > div{
    position: absolute;
    border-radius: 60%;
    width: 2.8rem;
    height: 2.2rem;
    background: var(--cat-eye-color);
    
    
}
.cat-head:active .eyes>div {
    background: radial-gradient( #000000 10%, #000000 20%, #c41818 30%, #ff0202 100%);
}




.Right-eye{
    right: 1.5rem;
    top: 2.4rem;
    
    
}
.Left-eye{
    right: 7.5rem;
    top: 2.4rem;
    
}

.nose {
  position: absolute;
  top: 55px;
  left: -50px;
  border-top-left-radius: 0%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  transform: rotate(180deg);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #ffaaf8;
}

.mouth>div{
    z-index: 2;
    position: absolute;
    border: 2px solid #000;
    width: 50px;
    height: 50px;
    top: 35px;
    border-width: 20%;
    border-radius: 190%/190px 150px 0 0; 
    rotate: 180deg;
    border-color: rgb(20, 20, 20) transparent transparent transparent;
}

.left-mouth{
    left: -4.5rem;

}
.right-mouth{
    right: 2.4rem;

}

.tooth{
    position: absolute;
    size: 1rem;
    
    top: 157%;
    
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-bottom: 4.5rem solid #ffffff;
    rotate: 180deg;
}
.tooth.Left{
    left: -190%;
    transform: scale(0.2) rotate(10deg);
}

.tooth.Right{
    right: 55%;
    transform: scale(0.2) rotate(-10deg);
}
/*Cat body <everything but the head*/
.cat-body{
    position: absolute;
    align-items: center;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    right: 0;
    left: 0;
    top: 10rem;
    bottom: 2rem;
    margin: auto;
    background: repeating-linear-gradient(black, #643737 1%, #643737 5%);
    width: 14rem;
    height: 12rem;
    border: .2rem solid #000;
    z-index: 0;
    margin: auto;

}

.tail{
    z-index: -1;
    position: absolute;
    transform: rotate(-80deg);
    top: 3rem;
    border-top: 4rem;
    border-bottom: 4rem;
    border-radius: 30%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 15rem;
    height: 3rem;
    right: -9.5rem;
    background: repeating-linear-gradient(90deg,black, #643737 3%, #643737 5%);
    border: 0.2rem solid #000;
    border-color: transparent rgb(20, 20, 20) rgb(20, 20, 20) transparent;
    
    

}

@media only screen and (max-width: 712px){

    .cat-head{
        position: relative;
        transform: scale(.5);
        top: 100%;
        
    }

    .cat-body{
        position: relative;
        transform: scale(.5);
        top: -10rem;
    }
    .cat-body> .tail{
        position: relative;
        transform: scale(.5) rotate(-80deg);
        top: 6.5rem;
        right: -7rem;
    }
}