* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgb(255, 236, 88);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dog{
    position: absolute;
    width: 100vmin;
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
  } 

  .eyes{
    display: flex;
    position: absolute;
    top: 25%;
    gap: 5vmin
  }
  .eye{
    width: 20vmin;
    height: 10vmin;
    position: relative;
    border-radius: 50%;
    border: solid 2vmin;
    border-color: rgb(95, 51, 28) transparent transparent transparent;
    transform: rotate(-15deg);
  }
  .e2{
    transform: scaleX(-1) rotate(-15deg);
  }
  .mouth{
    width: 60%;
    height: 60%;
    background: rgb(95, 51, 28);
    border-radius: 50%;
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  }
  .tongue{
    position: absolute;
    width: 20vmin;
    height: 27vmin;
    background: red;
    background: linear-gradient(180deg, rgba(95,51,28,1) 7%, rgba(255,0,0,1) 17%);
    border-radius: 0 0 50% 50%;
    top: 65%;

  }
  .nose {
    position: absolute;
    width: 16vmin;
    height: 13vmin;
    border-radius: 50%;
    background: rgba(95, 51, 28);
    top: 40%;
    left: 42%;
    z-index: 3;
  }

  .cheeks{
    display: flex;
    justify-content: space-between;
    position: absolute;
    gap: 1vmin

  }
  .cheek{
    width: 27vmin;
    height: 27vmin;
    border-radius: 50%;
    z-index: 2;
    background:linear-gradient(180deg, rgba(255,236,88,1) 59%, rgba(250,250,250,1) 76%);
    top: 1rem;
    left: 18rem
  }
  .cheek::after{
    content: '';
    display: block;
    position: relative;
    width: 2vmin;
    height: 2vmin;
    border-radius: 50%;
    background: rgba(95, 51, 28);
    top: 95%;
    left: 20%;
    transform: translate(12vmin, -8vmin);
    box-shadow: -8vmin -0.25vmin rgba(95, 51, 28), -4.75vmin -5.75vmin 0 0 rgba(95, 51, 28);
  }