* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgb(207, 153, 207);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .canvas{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.hat {
    position: relative;
    width: 28vmin;
    height: 30vmin;
    background-color: black;
   /* clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);  */
    overflow: visible;
}

.hat::before, .hat::after{
    content: "";
    position: absolute;
}
.hat::before{
    bottom: -10%;
    background-color: black;
    width: 28vmin;
    height: 5vmin;
    border-radius: 0 0 50% 50%;
}
.hat::after{
    background-color: black;
    width: 40vmin;
    height: 4vmin;
    top: -10%;
    left: -21%
}

.ears{
    position: absolute;
    display: flex;
    top: -28vmin;
    gap: 3vmin
}
.ear{
    width: 13vmin;
    height: 30vmin;
    background: white;
    border-radius: 0 100% 0 100%;
    transform: rotate(-3deg);
}

.ear::before{
    content: '';
    position: relative;
    display: block;
    width: 5vmin;
    height: 26vmin;
    background: pink;
    border-radius: 0 100% 0 100%;
    top: 15%;
    left: 36%;
    transform: rotate(-9deg);
}

.e2{
    transform: scaleX(-1) rotate(-5deg);
}

.ears:hover .e1{
    animation: moveEar1 0.5s linear infinite;
}

.ears:hover .e2{
    animation: moveEar2 0.5s linear infinite;
}
@keyframes moveEar1 {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-5deg);
    }
  }
@keyframes moveEar2 {
    0%, 100% {
      transform: scaleX(-1) rotate(0deg);
    }
    50% {
      transform: scaleX(-1) rotate(-5deg);
    }
  }