.ana, .matt {
  border: 2px solid #763498;
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 7px; float: left;
  
  margin-right: 5px;
  margin-bottom: 5px;
  background: url(https://i.pinimg.com/736x/d3/54/76/d3547609158f5924c63f357c33639d67.jpg) 100%;
}

.matt {
  border-color: #286815;
  float: right;
  background: url(https://i.pinimg.com/736x/dc/c4/bc/dcc4bc6166d92a598dc4d295045222e0.jpg);
}

.ana div, .matt div {
  width: 100%;
  height:100%;
  position: absolute;
  background-size: 100%;
}/*ana*/

/* ELEMENTS (ALL SCOPED INSIDE .ana) */
.ana .braid {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/braid.png);
  animation: anaBraid 3s infinite alternate ease-in-out;
}

.ana:hover .braid {
  animation: anaBraidHov 2s infinite alternate ease-in-out;
}

.ana .body {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/body.png);
}

.ana .blankhead {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/blankhead.png);
}

.ana .mouth {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/smile.png);
}

.ana:hover .mouth {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/mouth.png);
}

.ana:hover .eyeshold {
  opacity: 0;
}

.ana:hover .closed {
  opacity: 1;
}

.ana .eyewhites {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/EYEWHITE.png);
}

.ana .eyes {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/eyesz.png);
  animation: anaEyes 3s infinite alternate ease-in-out;
}

.ana .eyelids {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/eyelid.png);
}

.ana .eyelashes {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/eyelash.png);
}

.ana .closed {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/closed.png);
  opacity: 0;
}

.ana .eyebrows {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/eyebrows.png);
}

.ana .leftstrand {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/Strand%20left.png);
  animation: anaLeftstrand 3s infinite alternate ease-in-out;
}

.ana:hover .leftstrand {
  animation: anaLeftstrandHov 2s infinite alternate ease-in-out;
}

.ana .rightstrand {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/blah/strandright.png);
  animation: anaRightstrand 3s infinite alternate ease-in-out;
}

.ana:hover .rightstrand {
  animation: anaRightstrandHov 2s infinite alternate ease-in-out;
}

.ana .head {
  animation: anaHead 3s infinite alternate ease-in-out;
}

.ana:hover .head {
  animation: anaHeadHov 2s infinite alternate ease-in-out;
}

.holdpfp {
  transform: translateY(3px);
}

.ana:hover .holdpfp, .matt:hover .holdpfp {
  animation: anaJump 1s;
}

/* KEYFRAMES (ALL ANA-PREFIXED) */
@keyframes anaHead {
  50% { transform: rotate(10deg); }
}

@keyframes anaHeadHov {
  50% { transform: rotate(-5deg); }
}

@keyframes anaBraid {
  50% { transform: rotate(10deg) translate(5px, 5px); }
}

@keyframes anaBraidHov {
  50% { transform: rotate(-10deg); }
}

@keyframes anaEyes {
  50% { transform: translate(0px, -2px); }
}

@keyframes anaLeftstrand {
  50% { transform: rotate(10deg); }
}

@keyframes anaLeftstrandHov {
  50% { transform: rotate(-10deg); }
}

@keyframes anaRightstrand {
  50% { transform: rotate(10deg); }
}

@keyframes anaRightstrandHov {
  50% { transform: rotate(-10deg); }
}

@keyframes anaJump {
  50% { transform: translateY(0px); }
}
/* end of ana */
/* matt */
.matt .fur {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/fur.png)
}

.matt .body {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/body.png)
}

.matt .eyelids {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/eyelids.png)
}

.matt .eyewhites {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/eyewhites.png)
}

.matt .pupils {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/pupils.png)
}

.matt .blankhead {
background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/blankhead.png);
}

.matt .eyelashes {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/eyelashes.png);
}

.matt .mouth {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/mouth.png);
}

.matt .eyebrows {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/eyebrows.png);
}
.matt .blush {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/blush.png);
  opacity: 0;
}

.matt .closed {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/closed.png);
  opacity: 0;
}

.matt:hover .eyewhites, .matt:hover .pupils, .matt:hover .eyelashes {
  opacity: 0;
}

.matt:hover .closed, .matt:hover .blush {
  opacity: 1;
}
.matt:hover .mouth {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/it%20must%20be%20the%20killing%20to/smile.png);
}

.matt .head {
  animation: mattHead 3s infinite alternate ease-in-out;
}
.matt:hover .head {
  animation: mattHeadHov 3s infinite alternate ease-in-out;
}

@keyframes mattHead {
  50% { transform: rotate(-5deg); }
}
@keyframes mattHeadHov {
  50% { transform: rotate(10deg); }
}