@import url("https://fonts.googleapis.com/css?family=Creepster");
body,
html {
  background: #137275;
  font-family: "Creepster", cursive;
}

.vampire {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7em;
  animation: float 2s infinite ease-in-out alternate;
  font-size: 1.2em;
}

.head {
  position: absolute;
  left: 50%;
  margin-left: -2.5em;
}

.face {
  height: 4em;
  width: 5em;
  background: #DFE4E8;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.hair {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2em;
  width: 0;
  height: 0;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1em solid #242424;
}

.eye {
  height: 0.55em;
  width: 0.55em;
  background: #B81700;
  border-radius: 100%;
  position: absolute;
  top: 40%;
}
.eye.left {
  left: 25%;
}
.eye.left:before {
  right: -50%;
  transform: rotateZ(10deg);
}
.eye.right {
  right: 25%;
}
.eye.right:before {
  left: -50%;
  transform: rotateZ(-10deg);
}
.eye:before {
  position: absolute;
  content: "";
  display: block;
  border-top: 2px solid #242424;
  top: -0.1em;
  width: 1.25em;
}
.eye:after {
  width: 0.15em;
  height: 0.15em;
  background: #fff;
  content: "";
  display: block;
  border-raidus: 100%;
  left: 25%;
  top: 25%;
  position: absolute;
  opacity: 0.5;
}

.mouth {
  position: absolute;
  bottom: 13%;
  left: 50%;
  margin-left: -1.25em;
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-top: 1em solid black;
}
.mouth:after {
  position: absolute;
  content: "";
  display: block;
  height: 0.5em;
  width: 2.5em;
  background: #DFE4E8;
  top: -1.25em;
  left: -1.25em;
  border-radius: 100%;
  z-index: 10;
}
.mouth .tooth {
  position: absolute;
  bottom: 0.5em;
  width: 0;
  height: 0;
  border-left: 0.15em solid transparent;
  border-right: 0.15em solid transparent;
  border-top: 0.25em solid #fff;
  z-index: 2;
}
.mouth .tooth.left {
  left: 0.2em;
}
.mouth .tooth.right {
  right: 0.2em;
}

.ear {
  border-top: 1em solid #DFE4E8;
  position: absolute;
  z-index: 2;
  top: 1.5em;
}
.ear.left {
  border-left: 0.5em solid transparent;
  border-right: 0em solid transparent;
  left: -0.25em;
}
.ear.right {
  border-left: 0em solid transparent;
  border-right: 0.5em solid transparent;
  right: -0.25em;
}

.body {
  position: absolute;
  left: 50%;
  margin-left: -4em;
  top: 3em;
}

.cloak {
  width: 4em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-bottom: 7em solid #242424;
}
.cloak:after {
  width: 8em;
  height: 2em;
  content: "";
  display: block;
  background: #242424;
  bottom: -1em;
  position: absolute;
  left: 50%;
  margin-left: -4em;
  border-radius: 100%;
}

.collar {
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-top: 1em solid #B81700;
  position: absolute;
  z-index: 2;
  top: 0.5em;
}
.collar.left {
  transform: rotateZ(10deg);
  left: 2em;
}
.collar.right {
  transform: rotateZ(-10deg);
  right: 2em;
}

.shadow {
  position: absolute;
  top: 50%;
  width: 12em;
  margin-top: 6em;
  height: 1em;
  background-color: rgba(0, 0, 0, 0.2);
  left: 50%;
  margin-left: -6em;
  border-radius: 50%;
  animation: scale 2s infinite ease-in-out alternate;
}

@keyframes scale {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(0.6);
  }
}
@keyframes float {
  from {
    transform: translateY(1em);
  }
  to {
    transform: translateY(-1em);
  }
}
.author {
  position: absolute;
  right: 1em;
  bottom: 0.5em;
  color: #fff;
  opacity: 0.5;
  font-size: 0.8em;
}

a {
  color: #552835;
  color: #fff;
  text-decoration: none;
}