.face {
  margin-top: 10px;
  margin-left: 10px;
    width: 300px;
    height: 300px;
    background-color: #ccc;
    border-radius: 50%;
    position: relative;
  }

  .eye {
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
  }

  .eye.left {
    top: 120px;
    left: 80px;
  }

  .eye.right {
    top: 120px;
    right: 80px;
  }

  .nose {
    width: 20px;
    height: 20px;
    background-color: brown;
    border-radius: 50%;
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translate(-50%);
  }

  .ear {
    width: 80px;
    height: 120px;
    background-color: #ccc;
    border-radius: 50% 50% 0 0;
    position: absolute;
  }

  .ear.left {
    top: -30px;
    left: 40px;
  }

  .ear.right {
    top: -30px;
    right: 40px;
  }

 .mouth {
width: 80px;
height: 3px;
   background-color:#000;
position: absolute;
top: 220px;
left: 110px;
transform: rotate(180deg);
}

  .beard {
    width: 80px;
    height: 1px;
    background-color: #000;
    position: absolute;
    transform-origin: center;
  }

  .beard.left1 {
    top: 176px;
    left: 0px;
    transform: rotate(20deg);
  }

  .beard.left2 {
    top: 200px;
    left: 0px;
    transform: rotate(0);
  }

  .beard.left3 {
    top: 224px;
    left: 0px;
    transform: rotate(-20deg);
  }

  .beard.right1 {
    top: 176px;
    right: 0px;
    transform: rotate(-20deg);
  }

  .beard.right2 {
    top: 200px;
    right: 0px;
    transform: rotate(0);
  }

  .beard.right3 {
    top: 224px;
    right: 0px;
    transform: rotate(20deg);
  }