* {
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 100%;
}

body {
  background: #eee;
  font-size: 10px;
}

.heart {
  animation: 1s pulse infinite;
  margin: auto;
  position: relative;
  width: 40vmax;
}

.heart:before,
.heart:after {
  background: #ee565a;
  border-radius: 20vmax 20vmax 4vmax 4vmax;
  content: "";
  left: 20vmax;
  height: 32vmax;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  width: 20vmax;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.face {
  background: #222;
  border-radius: 0 0 10vmax 10vmax;
  border-top: 2vmax solid #fff;
  display: block;
  height: 6vmax;
  left: 14vmax;
  position: absolute;
  top: 16vmax;
  width: 12vmax;
  z-index: 5;
}

.face:before, .face:after {
  background: #222;
  border-radius: 4vmax;
  box-shadow: 0 4vmax 0 -0.9vmax #e04e50;
  content: "";
  display: block;
  height: 4vmax;
  position: absolute;
  bottom: 8vmax;
  width: 4vmax;
  z-index: 5;
}

.face:before {
  left: -4vmax;
}

.face:after {
  right: -4vmax;
}

h1 {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20vmax;
  font: 700 5vmax "Amatic SC";
  margin: 10vmax auto 4vmax;
  padding: 1vw;
  text-align: center;
  width: 50vmax;
  z-index: 5;
}

h1:after {
  border: 1vw solid transparent;
  border-color: transparent #fff #fff transparent;
  box-shadow: 0.1vmax 0.1vmax #ddd;
  content: "";
  display: block;
  left: 6vmax;
  position: absolute;
  transform: rotate(45deg);
}

@keyframes pulse {
  80% {
    transform: scale(0.9);
  }
}

/*# sourceMappingURL=output.css.map */