@import url("https://fonts.googleapis.com/css?family=Varela+Round");
@import url("https://fonts.googleapis.com/css?family=Pacifico");
#frame {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#overlay {
  font-family: 'Pacifico', cursive;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fafafa;
  z-index: 2;
  color: #ff007f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-align: center;
  line-height: 1.2;
  display: none;
}
#overlay.visible {
  display: flex;
  animation: overlay 300ms ease-in-out;
  opacity: .7;
  transform: scale(1.3);
}
@keyframes overlay {
  from {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: .5;
    transform: scale(2);
  }
  to {
    transform: scale(1.3);
    opacity: .7;
  }
}
#card {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}


h3, h4 {
  font-family: 'Varela Round', sans-serif;
  text-align: center;
  color: #777d7d;
  margin: 30px auto 10px;
  padding: 0 10px
}

h4 {
  margin: 0 0 30px 0;
  font-size: 14px;
}


.button-container {
  width: 100%;
  background-color: #fafafa;
  padding: 8px;
  display: flex;
  align-items: middle;
  justify-content: space-around;
}

.button {
  padding: 5px 15px;
  border-radius: 70px;
  border: none;
  font-size: 14px;
  min-width: 65px;
  outline: none;
}
.button-fetch {
  color: #777d7d;
  background-color: #e6e7e7;
}
.button-pet {
  color: #fafafa;
  background-color: #ff007f;
}

.dog .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog .ear:after, .dog .ear:before {
  content: '';
  display: inline-block;
  width: 40px;
  z-index: -1000;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
}
.dog .ear:after {
  right: 70%;
  box-sizing: border-box;
}
.dog .ear:before {
  left: 70%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

html, body {
  background: #fafafa;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

.dog {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog * {
  position: absolute;
}
.dog .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #ca9b50;
}
.dog .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(214, 177, 119, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog .eye:first-child {
  left: 0;
}
.dog .eye:last-child {
  right: 0;
}
.dog .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #eedec5;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog .muzzle:before, .dog .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #ca9b50;
}
.dog .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #D6B177;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog .body, .dog .torso, .dog .face {
  border-radius: 50%;
  background: #D6B177;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog .ear.ear-1:after, .dog .ear.ear-1:before {
  height: 90px;
}
.dog .ear.ear-1:before {
  bottom: -99px;
}
.dog .ear.ear-1:after, .dog .ear.ear-1:before {
  border-radius: 100% 100% 0 0;
}
.dog .ear.ear-2:after, .dog .ear.ear-2:before {
  height: 80px;
}
.dog .ear.ear-2:before {
  bottom: -88px;
}
.dog .ear.ear-2:before {
  border-radius: 100% 500% 0 0;
}
.dog .ear.ear-2:after {
  border-radius: 500% 100% 0 0;
}
.dog .ear.ear-3:after, .dog .ear.ear-3:before {
  height: 75px;
}
.dog .ear.ear-3:before {
  bottom: -82.5px;
}
.dog .ear.ear-3:before {
  transform: translateX(5px) rotate(15deg);
  border-radius: 100% 100% 0 0;
}
.dog .ear.ear-3:after {
  transform: translateX(-5px) rotate(-15deg);
  border-radius: 100% 100% 0 0;
}
.dog .ear.ear-4:after, .dog .ear.ear-4:before {
  height: 90px;
}
.dog .ear.ear-4:before {
  bottom: -99px;
}
.dog .ear.ear-4::before {
  transform: rotate(45deg) translateX(5px);
  border-top-left-radius: 68% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-4::after {
  transform: rotate(-5deg);
  border-top-right-radius: 68% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-5:after, .dog .ear.ear-5:before {
  height: 90px;
}
.dog .ear.ear-5:before {
  bottom: -99px;
}
.dog .ear.ear-5::before {
  border-top-left-radius: 68% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-5::after {
  border-top-right-radius: 68% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-6:after, .dog .ear.ear-6:before {
  height: 90px;
}
.dog .ear.ear-6:before {
  bottom: -99px;
}
.dog .ear.ear-6::before, .dog .ear.ear-6::after {
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.dog .ear.ear-6::before {
  transform: rotate(180deg) translateX(-15px) translateY(-50px);
  border-top-left-radius: 68% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-6::after {
  transform: rotate(180deg) translateX(15px) translateY(-50px);
  border-top-right-radius: 68% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-7:after, .dog .ear.ear-7:before {
  height: 70px;
}
.dog .ear.ear-7:before {
  bottom: -77px;
}
.dog .ear.ear-7::before, .dog .ear.ear-7::after {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.dog .ear.ear-7::before {
  transform: rotate(155deg) translateX(-20px) translateY(-15px);
  border-top-left-radius: 30% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-7::after {
  transform: rotate(205deg) translateX(20px) translateY(-15px);
  border-top-right-radius: 30% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-8:after, .dog .ear.ear-8:before {
  height: 60px;
}
.dog .ear.ear-8:before {
  bottom: -66px;
}
.dog .ear.ear-8::before, .dog .ear.ear-8::after {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.dog .ear.ear-8::before {
  transform: rotate(135deg) translateX(-15px) translateY(-10px);
  border-top-left-radius: 30% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-8::after {
  transform: rotate(225deg) translateX(15px) translateY(-10px);
  border-top-right-radius: 30% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-9:after, .dog .ear.ear-9:before {
  height: 50px;
}
.dog .ear.ear-9:before {
  bottom: -55px;
}
.dog .ear.ear-9::before, .dog .ear.ear-9::after {
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.dog .ear.ear-9::before {
  transform: rotate(135deg) translateX(-20px) translateY(0);
  border-top-left-radius: 10% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-9::after {
  transform: rotate(225deg) translateX(20px) translateY(0);
  border-top-right-radius: 10% 100%;
  border-top-left-radius: 100% 100%;
}
.dog .ear.ear-10:after, .dog .ear.ear-10:before {
  height: 70px;
}
.dog .ear.ear-10:before {
  bottom: -77px;
}
.dog .ear.ear-10::before, .dog .ear.ear-10::after {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.dog .ear.ear-10::before {
  transform: translateX(10px) translateY(-15px);
  border-top-left-radius: 40% 100%;
  border-top-right-radius: 100% 100%;
}
.dog .ear.ear-10::after {
  transform: rotate(250deg) translateX(10px) translateY(-15px);
  border-top-right-radius: 40% 100%;
  border-top-left-radius: 100% 100%;
}
.dog-white {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-white:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-white * {
  position: absolute;
}
.dog-white .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #e1e1e1;
}
.dog-white .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(250, 250, 250, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-white .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-white .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-white .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-white .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-white .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-white .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-white .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-white .eye:first-child {
  left: 0;
}
.dog-white .eye:last-child {
  right: 0;
}
.dog-white .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: white;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-white .muzzle:before, .dog-white .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-white .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #e1e1e1;
}
.dog-white .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-white .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-white .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-white .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #fafafa;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-white .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-white .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-white .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-white .body, .dog-white .torso, .dog-white .face {
  border-radius: 50%;
  background: #fafafa;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-white .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-white .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-white .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-white .ear:after, .dog-white .ear:before {
  background: #e1e1e1;
}
.dog-white .ear:after {
  border: 10px solid #fafafa;
}
.dog-white .ear.ear-6::before, .dog-white .ear.ear-6::after, .dog-white .ear.ear-7::before, .dog-white .ear.ear-7::after, .dog-white .ear.ear-8::before, .dog-white .ear.ear-8::after, .dog-white .ear.ear-9::before, .dog-white .ear.ear-9::after, .dog-white .ear.ear-10::before, .dog-white .ear.ear-10::after {
  border-color: #e1e1e1;
}
.dog .accent-white.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #fafafa;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-white.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #fafafa;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-white.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-white.accent-3:before, .dog .accent-white.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #fafafa;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-white.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-white.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-black {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-black:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-black * {
  position: absolute;
}
.dog-black .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #0f1010;
}
.dog-black .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(40, 42, 42, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-black .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-black .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-black .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-black .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-black .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-black .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-black .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-black .eye:first-child {
  left: 0;
}
.dog-black .eye:last-child {
  right: 0;
}
.dog-black .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #5a5e5e;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-black .muzzle:before, .dog-black .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-black .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #0f1010;
}
.dog-black .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-black .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-black .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-black .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #282a2a;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-black .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-black .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-black .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-black .body, .dog-black .torso, .dog-black .face {
  border-radius: 50%;
  background: #282a2a;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-black .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-black .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-black .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-black .ear:after, .dog-black .ear:before {
  background: #0f1010;
}
.dog-black .ear:after {
  border: 10px solid #282a2a;
}
.dog-black .ear.ear-6::before, .dog-black .ear.ear-6::after, .dog-black .ear.ear-7::before, .dog-black .ear.ear-7::after, .dog-black .ear.ear-8::before, .dog-black .ear.ear-8::after, .dog-black .ear.ear-9::before, .dog-black .ear.ear-9::after, .dog-black .ear.ear-10::before, .dog-black .ear.ear-10::after {
  border-color: #0f1010;
}
.dog .accent-black.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #282a2a;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-black.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #282a2a;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-black.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-black.accent-3:before, .dog .accent-black.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #282a2a;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-black.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-black.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-tan {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-tan:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-tan * {
  position: absolute;
}
.dog-tan .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #ca9b50;
}
.dog-tan .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(214, 177, 119, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-tan .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-tan .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-tan .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-tan .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-tan .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-tan .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-tan .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-tan .eye:first-child {
  left: 0;
}
.dog-tan .eye:last-child {
  right: 0;
}
.dog-tan .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #eedec5;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-tan .muzzle:before, .dog-tan .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-tan .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #ca9b50;
}
.dog-tan .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-tan .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-tan .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-tan .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #D6B177;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-tan .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-tan .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-tan .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-tan .body, .dog-tan .torso, .dog-tan .face {
  border-radius: 50%;
  background: #D6B177;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-tan .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-tan .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-tan .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-tan .ear:after, .dog-tan .ear:before {
  background: #ca9b50;
}
.dog-tan .ear:after {
  border: 10px solid #D6B177;
}
.dog-tan .ear.ear-6::before, .dog-tan .ear.ear-6::after, .dog-tan .ear.ear-7::before, .dog-tan .ear.ear-7::after, .dog-tan .ear.ear-8::before, .dog-tan .ear.ear-8::after, .dog-tan .ear.ear-9::before, .dog-tan .ear.ear-9::after, .dog-tan .ear.ear-10::before, .dog-tan .ear.ear-10::after {
  border-color: #ca9b50;
}
.dog .accent-tan.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #D6B177;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-tan.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #D6B177;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-tan.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-tan.accent-3:before, .dog .accent-tan.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #D6B177;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-tan.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-tan.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-brown {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-brown:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-brown * {
  position: absolute;
}
.dog-brown .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #5c441d;
}
.dog-brown .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(131, 96, 41, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-brown .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-brown .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-brown .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-brown .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-brown .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-brown .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-brown .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-brown .eye:first-child {
  left: 0;
}
.dog-brown .eye:last-child {
  right: 0;
}
.dog-brown .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #c7974b;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-brown .muzzle:before, .dog-brown .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-brown .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #5c441d;
}
.dog-brown .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-brown .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-brown .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-brown .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #836029;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-brown .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-brown .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-brown .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-brown .body, .dog-brown .torso, .dog-brown .face {
  border-radius: 50%;
  background: #836029;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-brown .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-brown .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-brown .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-brown .ear:after, .dog-brown .ear:before {
  background: #5c441d;
}
.dog-brown .ear:after {
  border: 10px solid #836029;
}
.dog-brown .ear.ear-6::before, .dog-brown .ear.ear-6::after, .dog-brown .ear.ear-7::before, .dog-brown .ear.ear-7::after, .dog-brown .ear.ear-8::before, .dog-brown .ear.ear-8::after, .dog-brown .ear.ear-9::before, .dog-brown .ear.ear-9::after, .dog-brown .ear.ear-10::before, .dog-brown .ear.ear-10::after {
  border-color: #5c441d;
}
.dog .accent-brown.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #836029;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-brown.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #836029;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-brown.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-brown.accent-3:before, .dog .accent-brown.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #836029;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-brown.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-brown.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-golden {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-golden:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-golden * {
  position: absolute;
}
.dog-golden .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #a68419;
}
.dog-golden .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(210, 167, 32, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-golden .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-golden .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-golden .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-golden .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-golden .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-golden .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-golden .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-golden .eye:first-child {
  left: 0;
}
.dog-golden .eye:last-child {
  right: 0;
}
.dog-golden .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #e9cc6f;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-golden .muzzle:before, .dog-golden .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-golden .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #a68419;
}
.dog-golden .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-golden .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-golden .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-golden .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #D2A720;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-golden .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-golden .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-golden .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-golden .body, .dog-golden .torso, .dog-golden .face {
  border-radius: 50%;
  background: #D2A720;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-golden .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-golden .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-golden .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-golden .ear:after, .dog-golden .ear:before {
  background: #a68419;
}
.dog-golden .ear:after {
  border: 10px solid #D2A720;
}
.dog-golden .ear.ear-6::before, .dog-golden .ear.ear-6::after, .dog-golden .ear.ear-7::before, .dog-golden .ear.ear-7::after, .dog-golden .ear.ear-8::before, .dog-golden .ear.ear-8::after, .dog-golden .ear.ear-9::before, .dog-golden .ear.ear-9::after, .dog-golden .ear.ear-10::before, .dog-golden .ear.ear-10::after {
  border-color: #a68419;
}
.dog .accent-golden.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #D2A720;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-golden.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #D2A720;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-golden.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-golden.accent-3:before, .dog .accent-golden.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #D2A720;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-golden.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-golden.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-darkGray {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-darkGray:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-darkGray * {
  position: absolute;
}
.dog-darkGray .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #484743;
}
.dog-darkGray .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(99, 97, 91, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-darkGray .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-darkGray .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-darkGray .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-darkGray .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-darkGray .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-darkGray .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-darkGray .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-darkGray .eye:first-child {
  left: 0;
}
.dog-darkGray .eye:last-child {
  right: 0;
}
.dog-darkGray .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #97948d;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-darkGray .muzzle:before, .dog-darkGray .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-darkGray .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #484743;
}
.dog-darkGray .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-darkGray .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-darkGray .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-darkGray .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #63615B;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-darkGray .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-darkGray .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-darkGray .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-darkGray .body, .dog-darkGray .torso, .dog-darkGray .face {
  border-radius: 50%;
  background: #63615B;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-darkGray .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-darkGray .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-darkGray .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-darkGray .ear:after, .dog-darkGray .ear:before {
  background: #484743;
}
.dog-darkGray .ear:after {
  border: 10px solid #63615B;
}
.dog-darkGray .ear.ear-6::before, .dog-darkGray .ear.ear-6::after, .dog-darkGray .ear.ear-7::before, .dog-darkGray .ear.ear-7::after, .dog-darkGray .ear.ear-8::before, .dog-darkGray .ear.ear-8::after, .dog-darkGray .ear.ear-9::before, .dog-darkGray .ear.ear-9::after, .dog-darkGray .ear.ear-10::before, .dog-darkGray .ear.ear-10::after {
  border-color: #484743;
}
.dog .accent-darkGray.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #63615B;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-darkGray.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #63615B;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-darkGray.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-darkGray.accent-3:before, .dog .accent-darkGray.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #63615B;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-darkGray.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-darkGray.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}
.dog-lightGray {
  width: 100px;
  height: 100px;
  top: -20%;
}
.dog-lightGray:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-10%) scale(1.5);
}
.dog-lightGray * {
  position: absolute;
}
.dog-lightGray .body {
  top: 50%;
  animation: dog-body 600ms ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -15px 0 0 #b1afaf;
}
.dog-lightGray .body:before {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 50%;
  width: 90%;
  height: 90%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  background: rgba(202, 201, 201, 0.4);
  transform-origin: right bottom;
  animation: dog-tail-blur 600ms 100ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes dog-body {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
.dog-lightGray .head {
  animation: dog-head 5400ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
  z-index: 1;
}
@keyframes dog-head {
  from, to {
    transform: rotate(45deg);
  }
  33.3% {
    transform: rotate(-45deg);
  }
  66.6% {
    transform: rotate(0);
  }
}
.dog-lightGray .torso {
  top: 40%;
  animation: dog-torso 600ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
  from {
    transform: translateX(-2%);
  }
  to {
    transform: translateX(2%);
  }
}
.dog-lightGray .torso #collar {
  display: block;
  width: 80%;
  height: 60%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  z-index: 4;
}
.dog-lightGray .eyes {
  width: 70%;
  top: 45%;
  left: 15%;
  z-index: 1;
}
.dog-lightGray .eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
  animation: dog-eye 5400ms infinite;
}
@keyframes dog-eye {
  from, to {
    animation-timing-function: step-end;
    opacity: 1;
  }
  50%, 55% {
    animation-timing-function: step-start;
    opacity: 0;
  }
}
.dog-lightGray .eye:before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 4px;
  left: 4px;
}
.dog-lightGray .eye:after {
  content: '';
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 20px;
  position: absolute;
  background: white;
  z-index: 3;
  top: 12px;
  left: 12px;
}
.dog-lightGray .eye:first-child {
  left: 0;
}
.dog-lightGray .eye:last-child {
  right: 0;
}
.dog-lightGray .muzzle {
  width: 50%;
  height: 30%;
  bottom: 5%;
  left: 24%;
  border: none;
  border-radius: 50% / 40% 40% 60% 60%;
  background: #fdfcfc;
  z-index: 1;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-lightGray .muzzle:before, .dog-lightGray .muzzle:after {
  content: '';
  display: block;
  position: absolute;
}
.dog-lightGray .muzzle:before {
  width: 6px;
  height: 20px;
  bottom: 0;
  left: calc(50% - 3px);
  background: #b1afaf;
}
.dog-lightGray .muzzle:after {
  background: black;
  width: 20px;
  height: 15px;
  bottom: 12px;
  left: calc(50% - 10px);
  border-bottom-left-radius: 60% 60%;
  border-bottom-right-radius: 60% 60%;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}
.dog-lightGray .tongue {
  width: 25px;
  height: 30%;
  left: calc(50% - 18px);
  bottom: 0;
  z-index: 0;
  transform-origin: center bottom;
  animation: dog-tongue 5400ms -50ms ease-in-out infinite;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
@keyframes dog-tongue {
  from, to {
    transform: rotate(0);
  }
  16.6666666667% {
    transform: rotate(30deg);
  }
  33.3333333333%, 66.6666666667% {
    transform: rotate(0);
  }
  50%, 83.3333333333% {
    transform: rotate(-20deg);
  }
}
.dog-lightGray .tongue:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #FD3163;
  animation: dog-tongue-inner 300ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(22%);
  }
}
.dog-lightGray .body .leg {
  position: absolute;
  display: block;
  height: 70%;
  width: 40px;
  top: 35%;
  background-color: #CAC9C9;
  z-index: 3;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.dog-lightGray .body .leg:first-child {
  left: -10px;
  transform: rotate(-10deg);
}
.dog-lightGray .body .leg:last-child {
  right: -10px;
  transform: rotate(10deg);
}
.dog-lightGray .ears {
  width: 40%;
  top: 50%;
  left: 30%;
  animation: dog-ears 5400ms 300ms ease infinite;
}
@keyframes dog-ears {
  42.3%, 71.6% {
    transform: rotate(-5deg);
  }
  50.3%, 79.6% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-5%);
  }
  from, 33.3%, 66%, to {
    transform: rotate(0);
  }
}
.dog-lightGray .body, .dog-lightGray .torso, .dog-lightGray .face {
  border-radius: 50%;
  background: #CAC9C9;
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-lightGray .head {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dog-lightGray .face {
  width: 100%;
  height: 95%;
  border-radius: 50% / 45% 45% 30% 30%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dog-lightGray .ear {
  position: absolute;
  z-index: -2;
  bottom: -10px;
}
.dog-lightGray .ear:after, .dog-lightGray .ear:before {
  background: #b1afaf;
}
.dog-lightGray .ear:after {
  border: 10px solid #CAC9C9;
}
.dog-lightGray .ear.ear-6::before, .dog-lightGray .ear.ear-6::after, .dog-lightGray .ear.ear-7::before, .dog-lightGray .ear.ear-7::after, .dog-lightGray .ear.ear-8::before, .dog-lightGray .ear.ear-8::after, .dog-lightGray .ear.ear-9::before, .dog-lightGray .ear.ear-9::after, .dog-lightGray .ear.ear-10::before, .dog-lightGray .ear.ear-10::after {
  border-color: #b1afaf;
}
.dog .accent-lightGray.accent-1 {
  content: '';
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 40px;
  position: absolute;
  background: #CAC9C9;
  top: -15px;
  left: -10px;
  z-index: 1;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
}
.dog .accent-lightGray.accent-2 {
  content: '';
  display: block;
  height: 45px;
  width: 25px;
  border-radius: 40px;
  position: absolute;
  background: #CAC9C9;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.dog .accent-lightGray.accent-3 {
  height: 10px;
  width: 90%;
  top: -15px;
  left: 5%;
}
.dog .accent-lightGray.accent-3:before, .dog .accent-lightGray.accent-3:after {
  content: '';
  display: block;
  height: 8px;
  width: 12px;
  background: #CAC9C9;
  z-index: 2;
  border-radius: 50%/ 60% 60% 30% 30%;
  position: absolute;
}
.dog .accent-lightGray.accent-3:before {
  left: 10%;
  transform: rotate(20deg);
}
.dog .accent-lightGray.accent-3:after {
  right: 10%;
  transform: rotate(-20deg);
}