:root{
  --primary-color: rgb(205, 17, 17);
  --secodary-color: rgb(255, 222, 9);
  --background-color:  linear-gradient(90deg, rgba(0,73,120,1) 54%, rgba(0,118,178,1) 100%);
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #CCDAEA;
    display: flex;
    justify-content: end;
    align-items: center;
  }

  .cat {
    position: relative;
    display: flex;
    right: -25vmin;
    bottom: 1vmin;
  }
  .c1{
    position: relative;
    width: 70vmin;
    height: 90vmin;
    border-radius: 50%;
    border: 1vmin solid;
    border-color: transparent transparent black black;
    transform: rotate(-35deg);
  }
.c1::before, .c1::after, .e1::before, .e1::after, .e2::before, .e2::after, 
.y1::before, .y2::before, .nose::before, .nose::after,
.moustache::before,  .moustache::after{
    content: '';
    position: relative;
    display: flex;
  }

  .c1::before{
    width: 70vmin;
    height: 50vmin;
    border-radius: 50%;
    border: 1vmin solid;
    border-color: transparent transparent transparent black;
    transform: rotate(-15deg);
    top: 17vmin;
    left: 35vmin
  }
 
  .c1::after{
    width: 15vmin;
    height: 4vmin;
    border-radius: 50%;
    border: 1vmin solid;
    border-color: black transparent transparent transparent;
    transform: rotate(35deg);
    top: -27vmin;
    left: 13vmin
  }
    
  .ear{
    width: 14.5vmin;
    height: 5vmin;
    position: absolute;
    border: 1vmin solid;
    border-color: black transparent transparent transparent;
    transform: rotate(26deg);
    left: -5vmin;
    top: 34vmin

  }
  .e2{
    transform: rotate(-20deg);
    left: 21.4vmin;
    top: 35vmin
  }

  .e1::before, .e1::after, .e2::before, .e2::after{
    width: 2.4vmin;
    height: 2vmin;
    border: 0.4vmin solid;
    border-color: black transparent transparent transparent;
    top: 1vmin;
    left: 2.5vmin
  }
  .e1::after{
    transform: rotate(60deg);
    top: -1vmin;
    left: 1vmin
  }

  .e2::before{
    top: 1vmin;
    left: 6.5vmin
  }
  .e2::after{
    transform: rotate(-70deg);
    top: -1.3vmin;
    left: 8.5vmin
  }

  .eye {
    width: 5vmin;
    height: 7vmin;
    border-radius: 50%;
    border: solid 0.5vmin black;
    position: absolute;
    top: 45vmin;
    left: 12vmin;
    overflow: hidden;
  }
  .y2 {
    width: 4vmin;
    height: 6vmin;
    top: 45vmin;
    left: 22vmin
  }

  .y1::before,  .y2::before{
    width: 2vmin;
    height: 4vmin;
    background: black;
    border-radius: 50%;
  }
  .y1::before {
    top: 2vmin;
    left:2.6vmin
  }
  .y2::before{
    top: 2.4vmin;
    left:-0.6vmin
  }
  .nose{
    position: absolute;
    width: 6vmin;
    height: 10vmin;
    background: black;
    border-radius: 50%;
    top: 51.5vmin;
    left: 16.5vmin;
    transform: rotate(-5deg);
  }
  .nose::before, .nose::after{
    width: 10vmin;
    height: 15vmin;
    background: #CCDAEA;
    border-radius: 50%;
    left: 4vmin;
  }
  .nose::after{
    left: -7vmin;
    top: -14vmin
  }
  .moustache, .moustache::before,  .moustache::after {
    width: 20vmin;
    height: 0.4vmin;
    background: black;
    position: absolute;
  }
  .moustache{
    top:59vmin;
    left: -3vmin;
    z-index: -1;
  }
  .moustache::before{
   top:-3vmin;
    transform: rotate(20deg);
  }
  .moustache::after{
    top:3vmin;
    transform: rotate(-20deg);
  }
  .m2{
    transform: scaleX(-1) rotate(10deg);
    left: 24vmin;
    top: 56vmin
  }
  .mouth {
    width: 8vmin;
    height: 10vmin;
    border-radius: 50%;
    border: 1vmin solid;
    border-color: black transparent transparent transparent;
    position: absolute;
    top: 61vmin;
    left: 16.5vmin
  }