html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.background {
  width: 110%;
  height: 110%;
  background-image: url('peeps2.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(20px);
  position: absolute;
  margin: -5%;
}

.peeps {
  width: 100%;
  height: 100%;
  background-image: url('peeps2.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.accessory {
  height: auto;
  position: absolute;
}

@keyframes moustache {
  3% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    -ms-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  6% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  10% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes moustache2 {
  12% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  15% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  18% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    -ms-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }
  21% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
}

@keyframes moustache3 {
  35% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  38% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  41% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    -ms-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }
  44% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
}

@keyframes guitar {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 50deg);
    -ms-transform: rotate3d(0, 0, 1, 50deg);
    transform: rotate3d(0, 0, 1, 50deg);
  }
  33% {
    -webkit-transform: rotate3d(0, 0, 1, 48deg);
    -ms-transform: rotate3d(0, 0, 1, 48deg);
    transform: rotate3d(0, 0, 1, 48deg);
  }
  66% {
    -webkit-transform: rotate3d(0, 0, 1, 52deg);
    -ms-transform: rotate3d(0, 0, 1, 52deg);
    transform: rotate3d(0, 0, 1, 52deg);
  }
}

@keyframes filigrana {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
    -ms-transform: rotate3d(0, 0, 1, 2deg);
    transform: rotate3d(0, 0, 1, 2deg);
  }
  33% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  66% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes rod {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -25deg);
    -ms-transform: rotate3d(0, 0, 1, -25deg);
    transform: rotate3d(0, 0, 1, -25deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, -15deg);
    -ms-transform: rotate3d(0, 0, 1, -15deg);
    transform: rotate3d(0, 0, 1, -15deg);
  }
}

@keyframes hair {
  0% {
    -webkit-transform: scale(1) rotate3d(0, 0, 1, 5deg);
    -ms-transform: scale(1) rotate3d(0, 0, 1, 5deg);
    transform: scale(1) rotate3d(0, 0, 1, 5deg);
  }
  50% {
    -webkit-transform: scale(1.03) rotate3d(0, 0, 1, 5deg);
    -ms-transform: scale(1.03) rotate3d(0, 0, 1, 5deg);
    transform: scale(1.03) rotate3d(0, 0, 1, 5deg);
  }
}

@keyframes accordeon {
  0% {
    -webkit-transform: scale(1, 1) rotate3d(0, 0, 1, 5deg);
    -ms-transform: scale(1, 1) rotate3d(0, 0, 1, 5deg);
    transform: scale(1, 1) rotate3d(0, 0, 1, 5deg);
  }
  50% {
    -webkit-transform: scale(0.7, 1) rotate3d(0, 0, 1, -5deg);
    -ms-transform: scale(0.7, 1) rotate3d(0, 0, 1, -5deg);
    transform: scale(0.7, 1) rotate3d(0, 0, 1, -5deg);
  }
}

@keyframes garrafao {
  68% {
    -webkit-transform: rotate3d(0, 0, 1, 8deg);
    -ms-transform: rotate3d(0, 0, 1, 8deg);
    transform: rotate3d(0, 0, 1, 8deg);
  }
  85% {
    -webkit-transform: translate(5%, -2%) rotate3d(0, 0, 1, 57deg);
    -ms-transform: translate(5%, -2%) rotate3d(0, 0, 1, 57deg);
    transform: translate(5%, -2%) rotate3d(0, 0, 1, 57deg);
  }
}

.moustache {
  -webkit-animation: moustache;
  animation: moustache;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.moustache2 {
  -webkit-animation: moustache2;
  animation: moustache2;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}

.moustache3 {
  -webkit-animation: moustache3;
  animation: moustache3;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}

.guitar {
  -webkit-animation: guitar;
  animation: guitar;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.filigrana {
  -webkit-animation: filigrana;
  animation: filigrana;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.rod {
  -webkit-animation: rod;
  animation: rod;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.hair {
  -webkit-animation: hair;
  animation: hair;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.accordeon {
  -webkit-animation: accordeon;
  animation: accordeon;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.garrafao {
  -webkit-animation: garrafao;
  animation: garrafao;
  animation-duration: 19s;
  animation-iteration-count: infinite;
}