@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
#heart {
  width: 90vmin;

  -webkit-filter: drop-shadow( 0px 0px 8px rgba(222, 91, 126, 1));
  filter: drop-shadow( 0px 0px 8px rgba(222, 91, 126, 1));

  animation: heartbeat 4s infinite;
}

pre {
  background-color: #E2708E;
}

body {
  background-color: #F3C1CF;
  padding: 0;
  margin: 0;
  margin-top: 1em;
  font-family: 'Source Code Pro', sans-serif;
  font-weight: 400;
  color: #FBEAEF;
  font-size: 1em;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.975, 0.975);
  }
  30% {
    transform: scale(0.975, 0.975);
  }
  35% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(0.975, 0.975);
  }
  45% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.975, 0.975);
  }
  100% {
    transform: scale(0.975, 0.975);
  }
}

.letter {
  fill: #F3C1CF;
  font-size: 0.8em;
  fill-opacity: 0;

  transition-duration: 500ms;
}

#crossword {
  color: #E2708E;
  position: fixed;
  bottom: 0;
  left: 0;
  border: 2px solid #E2708E;
  padding: 1em;
  margin-left: 0.3em;
  margin-bottom: 0.3em;
  opacity: 0;
  transition-duration: 2000ms;
}

#crossword ol {
  counter-reset: cw-counter;
  list-style: none;
  padding-left: 40px;
  margin-bottom: 0;
}

#crossword li {
  counter-increment: cw-counter;
  position: relative;
  margin: 0 0 0.5rem 0;
}

#crossword li::before {
  content: counter(cw-counter);
  font-weight: bold;
  position: absolute;
  left: -30px;
}

#crossword h3 {
  margin-top: 0;
}

#pup {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 25vmin;
  height: 25vmin;
  transform: translateY(25vmin);
}