/* From Uiverse.io by elijahgummer but edited by me to match my Yorkie dog more :P */
.main {
    position: relative;
    width: 100vmax;
    height: 100vmax;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .leg {
    position: absolute;
    bottom: 0;
    width: 2vmax;
    height: 2.125vmax;
  }
  
  .paw {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.95vmax;
    height: 1.875vmax;
    overflow: hidden;
  }
  
  .paw::before {
    content: "";
    position: absolute;
    width: 3.75vmax;
    height: 3.75vmax;
    border-radius: 50%;
  }
  
  .top {
    position: absolute;
    bottom: 0;
    left: 0.75vmax;
    height: 4.5vmax;
    width: 2.625vmax;
    border-top-left-radius: 1.425vmax;
    border-top-right-radius: 1.425vmax;
    transform-origin: bottom right;
    transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
    z-index: -1;
    background-image: linear-gradient(70deg, transparent 20%, #a47148, 20%);
  }
  
  .dog {
    position: relative;
    width: 22.5vmax;
    height: 8.25vmax;
  }
  
  .dog::before {
    content: "";
    position: absolute;
    bottom: -0.75vmax;
    right: -0.15vmax;
    width: 100%;
    height: 1.5vmax;
    background-color: rgba(28, 49, 48, 0.1);
    border-radius: 50%;
    z-index: -1000;
    animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__head {
    position: absolute;
    left: 4.5vmax;
    bottom: 0;
    width: 9.75vmax;
    height: 8.25vmax;
    border-top-left-radius: 4.05vmax;
    border-top-right-radius: 4.05vmax;
    border-bottom-right-radius: 3.3vmax;
    border-bottom-left-radius: 3.3vmax;
    background-color: #d2b48c;
    animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__head-c {
    position: absolute;
    left: 1.5vmax;
    bottom: 0;
    width: 9.75vmax;
    height: 8.25vmax;
    animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
    z-index: -1;
  }
  
  .dog__snout {
    position: absolute;
    left: -1.5vmax;
    bottom: 0;
    width: 7.5vmax;
    height: 3.75vmax;
    border-top-right-radius: 3vmax;
    border-bottom-right-radius: 3vmax;
    border-bottom-left-radius: 4.5vmax;
    background-color: #f5deb3;
    animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__snout::before {
    content: "";
    position: absolute;
    left: -0.1125vmax;
    top: -0.15vmax;
    width: 1.875vmax;
    height: 1.125vmax;
    border-top-right-radius: 3vmax;
    border-bottom-right-radius: 3vmax;
    border-bottom-left-radius: 4.5vmax;
    background-color: #3b2f2f;
    animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__nose {
    position: absolute;
    top: -1.95vmax;
    left: 40%;
    width: 0.75vmax;
    height: 2.4vmax;
    border-radius: 0.525vmax;
    transform-origin: bottom;
    transform: rotateZ(10deg);
    background-color: #3b2f2f;
  }
  
  .dog__eye-l,
  .dog__eye-r {
    position: absolute;
    top: -0.9vmax;
    width: 0.675vmax;
    height: 0.375vmax;
    border-radius: 50%;
    background-color: #1c1c1c;
    animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__eye-l {
    left: 27%;
  }
  
  .dog__eye-r {
    left: 65%;
  }
  
  .dog__ear-l,
  .dog__ear-r {
    position: absolute;
    width: 6.5vmax;
    height: 2.5vmax;
    border-top-left-radius: 0vmax;
    border-top-right-radius: 0vmax;
    border-bottom-right-radius: 3.3vmax;
    border-bottom-left-radius: 3.3vmax;
    background-color: #bc9473;
  }
  
  .dog__ear-l {
    top: 1.5vmax;
    left: 6vmax;
    transform-origin: bottom left;
    transform: rotateZ(-50deg);
    z-index: -1;
    animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__ear-r {
    top: 1.5vmax;
    right: 3vmax;
    transform-origin: bottom right;
    transform: rotateZ(20deg);
    z-index: -2;
    animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__body {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 0.3vmax;
    left: 3.75vmax;
    width: 18.75vmax;
    height: 7.2vmax;
    border-top-left-radius: 3vmax;
    border-top-right-radius: 6vmax;
    border-bottom-right-radius: 1.5vmax;
    border-bottom-left-radius: 6vmax;
    background-color: #b09879;
    z-index: -2;
    animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  }
  
  .dog__tail {
    position: absolute;
    right: -3vmax;
    height: 1.5vmax;
    width: 4.5vmax;
    background-color: #4b3f3f;
    border-radius: 1.5vmax;
  }
  
  .dog__paws {
    position: absolute;
    bottom: 0;
    left: 7.5vmax;
    width: 12vmax;
    height: 3vmax;
  }
  
  .dog__bl-leg {
    left: -3vmax;
    z-index: -10;
  }
  
  .dog__bl-paw::before {
    background-color: #f5deb3;
  }
  
  .dog__bl-top {
    background-image: linear-gradient(80deg, transparent 20%, #6d4c41 20%);
  }
  
  .dog__fl-leg {
    z-index: 10;
    left: 0;
  }
  
  .dog__fl-paw::before {
    background-color: #f5deb3;
  }
  
  .dog__fr-leg {
    right: 0;
  }
  
  .dog__fr-paw::before {
    background-color: #f5deb3;
  }
  
  /* Animations */
  @keyframes head {
    0%, 10%, 20%, 26%, 28%, 90%, 100% {
      height: 8.25vmax;
      bottom: 0;
      transform: rotateZ(0);
    }
    5%, 15%, 22%, 24%, 30% {
      height: 8.1vmax;
    }
    32%, 50% {
      height: 8.25vmax;
    }
    55%, 60% {
      bottom: 0.75vmax;
      transform: rotateZ(0);
    }
    70%, 80% {
      bottom: 0.75vmax;
      transform: rotateZ(10deg);
    }
  }
  
  @keyframes body {
    0%, 10%, 20%, 26%, 28%, 32%, 100% {
      height: 7.2vmax;
    }
    5%, 15%, 22%, 24%, 30% {
      height: 7.05vmax;
    }
  }
  
  @keyframes ear-l {
    0%, 10%, 20%, 26%, 28%, 82%, 100% {
      transform: rotateZ(-50deg);
    }
    5%, 15%, 22%, 24% {
      transform: rotateZ(-48deg);
    }
    30%, 31% {
      transform: rotateZ(-30deg);
    }
    32%, 80% {
      transform: rotateZ(-60deg);
    }
  }
  
  @keyframes ear-r {
    0%, 10%, 20%, 26%, 28% {
      transform: rotateZ(20deg);
    }
    5%, 15%, 22%, 24% {
      transform: rotateZ(18deg);
    }
    30%, 31% {
      transform: rotateZ(10deg);
    }
    32% {
      transform: rotateZ(25deg);
    }
  }
  
  @keyframes snout {
    0%, 10%, 20%, 26%, 28%, 82%, 100% {
      height: 3.75vmax;
    }
    5%, 15%, 22%, 24% {
      height: 3.45vmax;
    }
  }
  
  @keyframes snout-b {
    0%, 10%, 20%, 26%, 28%, 98%, 100% {
      width: 1.875vmax;
    }
    5%, 15%, 22%, 24% {
      width: 1.8vmax;
    }
    34%, 98% {
      width: 1.275vmax;
    }
  }
  
  @keyframes shadow {
    0%, 10%, 20%, 26%, 28%, 30%, 84%, 100% {
      width: 99%;
    }
    5%, 15%, 22%, 24% {
      width: 101%;
    }
    34%, 81% {
      width: 96%;
    }
  }
  
  @keyframes eye {
    0%, 30% {
      width: 0.675vmax;
      height: 0.3vmax;
    }
    32%, 59%, 90%, 100% {
      width: 0.525vmax;
      height: 0.525vmax;
      transform: translateY(0);
    }
    60%, 75% {
      transform: translateY(-0.3vmax);
    }
    80%, 85% {
      transform: translateY(0.15vmax);
    }
  }