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

  .peter{
    position: relative;
  }
  .eyes{
    display: flex;
    transform: rotate(-7deg);
    justify-content: center;
    align-items: center;
    gap: 7vmin
  }
  .eye{
    width: 15vmin;
    height: 15vmin;
    border-radius: 50%;
    background: white;
    position: relative;
    z-index: 0;
    border: solid 0.8vmin black;
    overflow: hidden;
  }

  .eye::before{
    content: '';
    display: block;
    position: relative;
    width: 12vmin;
    height: 3vmin;
    background: #FFB3A2;
    top: -7%;
    left:5%;
    border: solid 0.8vmin;
    border-color: transparent transparent black transparent;
  }

  .eye::after{
    content: '';
    display: block;
    position: relative;
    width: 2vmin;
    height: 2vmin;
    border-radius: 50%;
    background: black;
    top: 10%;
    left: 30%;

  } 
  
  .glasses-line{
    width: 15vmin;
    height: 4vmin;
    border-radius: 50%;
    border: solid 0.8vmin;
    border-color: black transparent transparent transparent;
    position: absolute;
    top:25%;
    z-index: -1;
  }
  .nose{
    width: 19vmin;
    height: 14vmin;
    border: solid 0.8vmin;
    border-color:  black black black transparent;
    position: relative;
    border-radius: 50%;
    background: #FFB3A2;
    top: -9%;
    left: 50%;
  }

  .mouth {
    position: relative;
    top: -18%
  }
  .upper-lip{
    width: 45vmin;
    height: 15vmin;
    border-radius: 50%;
    border: solid 0.8vmin;
    border-color: transparent transparent black transparent;
    position: relative;
    transform: rotate(7deg);
  }
  .upper-lip::before{
    content: '';
    display: block;
    position: relative;
    width: 6vmin;
    height: 2vmin;
    border: solid 0.8vmin;
    border-color: transparent transparent black transparent;
    border-radius: 50%;
    transform: rotate(154deg);
    top: 73%;
  }
  .upper-lip::after{
    content: '';
    display: block;
    position: relative;
    width: 6vmin;
    height: 2vmin;
    border: solid 0.8vmin;
    border-color: transparent transparent black transparent;
    border-radius: 50%;
    transform: rotate(30deg);
    top: 25%;
    left:80%
  }
 
  .bottom-lip {
    position: relative;
    width: 11vmin;
    height: 5vmin;
    border: solid 0.8vmin;
    border-color: transparent transparent black transparent;
    border-radius: 50%;
    transform: rotate(223deg);
   left:70%;
   top: 1vmin
  }

  .bottom-lip::before{
    content: '';
    display: block;
    position: relative;
    width: 14vmin;
    height: 2vmin;
    border: solid 0.8vmin;
    border-color: black transparent transparent transparent;
    border-radius: 50%;
    transform: rotate(86deg);
    top: -140%;
    left:-85%
  }
  .chin{
    width: 18vmin;
    height: 17vmin;
    border-radius: 50%;
    border: solid 0.8vmin;
    border-color: transparent black black black;
    transform: rotate(336deg);
    position: relative;
    top: -4%;
    left: 45%
  }
  .chin::after{
    content: '';
    display: block;
    width: 18vmin;
    height: 17vmin;
    border-radius: 50%;
    border: solid 0.8vmin;
    border-color: transparent transparent black black;
    background: #FFB3A2;
    transform: rotate(10deg);
    position: relative;
    top: -45%;
    left: -86%
  }