.dog 
  .hears
  .head
    .nose
  .neck
  .tale
  .legs
    .back-leg-left
    .back-foot-left
    .back-leg-right
    .back-foot-right    
  .body
  .spots
    .spot.one
    .spot.two
    .spot.three
  .legs
    .front-leg-left
    .front-foot-left
    .front-leg-right
    .front-foot-right

a(class="button" href="https://dribbble.com/gigantic_click") Gigantic

$body-color: #f89d2a;
$spot-color: #d52228;
$light-spot-color: #febf3e;
$necklace: #29589c;
$shadow: #f47e36;
$shadow-darker: #ed6626;

* {
  background-color: ivory;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  position: relative;
  font-family: 'Merriweather', serif;
}

body {}

.dog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -100%);
}

.head {
  background-color: $body-color;
  width: 11em;
  height: 5em;
  border-radius: 0px 0px 0px 80px;
}

.head::before {
  content: "";
  background-color: $spot-color;
  width: 7em;
  height: 3.2em;
  border-radius: 0px 0px 50px 50px;
  position: absolute;
  top: 0em;
  left: 4em;
}

.head::after {
  content: "";
  background-color: black;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50px;
  position: absolute;
  top: 0.5em;
  left: 6em;
}

.nose {
  background-color: black;
  width: 2em;
  height: 1em;
  border-radius: 0px 0px 50px 50px;
  position: absolute;
}

.hears {
  background-color: $body-color;
  width: 2em;
  height: 2.8em;
  border-radius: 80px 0px 0px 0px;
  position: absolute;
  top: -2.8em;
  left: 7em;
}

.hears::before {
  content: "";
  background-color: $spot-color;
  width: 2em;
  height: 2.8em;
  border-radius: 80px 0px 0px 0px;
  position: absolute;
  left: 2em;
}

.neck {
  background-color: $body-color;
  width: 6em;
  height: 2em;
  position: absolute;
  left: 5em;
}

.neck::before {
  content: "";
  background-color: #528ac7;
  width: 6.5em;
  height: 0.5em;
  box-shadow: -1px 1px 0px 8px $necklace;
  position: absolute;
  top: 1em;
  left: -0.2em;
}

.body {
  background-color: $shadow;
  width: 17em;
  height: 8em;
  border-radius: 0px 80px 0px 80px;
  position: absolute;
  top: 7.05em;
  left: 5em;
}

.body::before {
  content: "";
  background-color: $body-color;
  width: 16.5em;
  height: 5.5em;
  border-radius: 0px 80px 0px 80px;
  position: absolute;
  top: 0em;
  left: 0.5em;
}

.tale {
  background-color: $shadow-darker;
  width: 2em;
  height: 10em;
  border-radius: 90px 0px 0px 0px;
  position: absolute;
  top: 2em;
  left: 19.8em;
  animation: rotate 1.2s linear infinite;
  transform-origin: bottom right;
}

.tale::before {
  content: "";
  background-color: $shadow;
  width: 2em;
  height: 6em;
  border-radius: 90px 0px 0px 0px;
  position: absolute;
}

.tale::after {
  content: "";
  background-color: $shadow-darker;
  width: 2em;
  height: 2em;
  border-radius: 0px 80px 0px 0px;
  position: absolute;
  top: 4em;
}

.spot {
  background-color: $light-spot-color;
  position: absolute;
  border-radius: 50px;
}

.one {
  width: 2.5em;
  height: 0.8em;
  top: 5em;
  left: 16.5em;
}

.two {
  width: 3.5em;
  height: 1.5em;
  top: 3em;
  left: 13em;
}

.three {
  width: 2em;
  height: 1em;
  top: 6em;
  left: 11em;
}

// Back legs
// Back leg left
.back-leg-left {
  background-color: $spot-color;
  width: 5em;
  height: 4em;
  border-radius: 0px 0px 0px 35px;
  position: absolute;
  top: 7em;
  left: 7em;
}

.back-foot-left {
  background-color: $spot-color;
  width: 3.5em;
  height: 2em;
  border-radius: 50px 0px 0px 0px;
  position: absolute;
  top: 11em;
  left: 8.5em;
}

.back-foot-left::before {
  content: "";
  background-color: $spot-color;
  width: 2em;
  height: 1em;
  position: absolute;
  top: -0.5em;
  left: 1em;
}

// Back leg right
.back-leg-right {
  background-color: $spot-color;
  width: 5em;
  height: 4em;
  border-radius: 0px 0px 0px 35px;
  position: absolute;
  top: 7em;
  left: 15em;
}

.back-foot-right {
  background-color: $spot-color;
  width: 5em;
  height: 2em;
  border-radius: 50px 0px 0px 0px;
  position: absolute;
  top: 11em;
  left: 16em;
}

.back-foot-right::before {
  content: "";
  background-color: $spot-color;
  width: 2em;
  height: 1em;
  position: absolute;
  top: -0.5em;
  left: 1em;
}

// Front legs
// Front leg left
.front-leg-left {
  background-color: $body-color;
  width: 3.5em;
  height: 4em;
  border-radius: 0px 0px 0px 35px;
  position: absolute;
  top: 7em;
  left: 10em;
}

.front-foot-left {
  background-color: $body-color;
  width: 3.5em;
  height: 2em;
  border-radius: 50px 0px 0px 0px;
  position: absolute;
  top: 11em;
  left: 10em;
}

.front-foot-left::before {
  content: "";
  background-color: $body-color;
  width: 2em;
  height: 1em;
  position: absolute;
  top: -0.5em;
  left: 1.5em;
}

// Front leg right
.front-leg-right {
  background-color: $body-color;
  width: 5em;
  height: 4em;
  border-radius: 0px 0px 0px 35px;
  position: absolute;
  top: 7em;
  left: 17em;
}

.front-foot-right {
  background-color: $body-color;
  width: 3.5em;
  height: 2em;
  border-radius: 50px 0px 0px 0px;
  position: absolute;
  top: 11em;
  left: 18.5em;
}

.front-foot-right::before {
  content: "";
  background-color: $body-color;
  width: 2em;
  height: 1em;
  position: absolute;
  top: -0.5em;
  left: 1.3em;
}

.button {
  background-color: $body-color;;
  width: 8em;
  height: 1.5em;
  border-radius: 20px;
  position: fixed;
  top: 25em;
  left: 48%;
  
}

a {
  color: white;
  text-align: center;
  font-size: 24px;
  line-height: 1.5em;
  text-decoration: none;
  list-style: none;
}

a:hover{
  background-color: $shadow;
  transition: ease-in 0.2s;
}

@keyframes rotate {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}