@font-face {
  font-family: clipneon;
  src: url(clip.ttf);
}

html, body {
  display: table;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

#container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.sign-two {
  color: #FF2020;
  font-family: clipneon;
  font-size: 5vw;
  line-height: 5vw;
  text-shadow: 
    -.1vw 0vw .25vw #FF2020, -.2vw 0vw .25vw #FF2020, -.4vw 0vw .25vw #FF2020, 
    -.1vw 0vw .1vw #CC0000, -.2vw 0vw .1vw #CC0000, -.4vw 0vw .1vw #CC0000,
    -.1vw 0vw .8vw #CC0000, -.2vw 0vw .8vw #CC0000, -.4vw 0vw .8vw #CC0000,
    -.1vw 0vw .5vw #CC0000, -.2vw 0vw .5vw #CC0000, -.4vw 0vw .5vw #CC0000, 
    -.1vw 0vw 10vw #FA1616, -.2vw 0vw 10vw #FA1616, -.4vw 0vw 10vw #FA1616;
}

.heart {
  color: #FBB4FF;
  font-family: Arial, sans-serif;
  text-shadow: 
    -.1vw 0vw .25vw #FBB4FF, -.2vw 0vw .25vw #FBB4FF, -.4vw 0vw .25vw #FBB4FF, 
    -.1vw 0vw 1vw #E82FF5, -.2vw 0vw .8vw #E82FF5, -.4vw 0vw .8vw #E82FF5,
    -.1vw 0vw 10vw #CB16FA, -.2vw 0vw 10vw #CB16FA, -.4vw 0vw 10vw #CB16FA;
}

.heart-off {
  animation: heart 0.5s ease infinite;
}

.off {
  color: #6B0000;
  display: inline-block;
  font-family: clipneon;
  text-shadow: 
    -.1vw 0vw .25vw #6B0000, -.2vw 0vw .25vw #6B0000,
    -.1vw 0vw .1vw #3D0000, -.2vw 0vw .1vw #3D0000,
    -.1vw 0vw .8vw #3D0000, -.2vw 0vw .8vw #3D0000,
    -.1vw 0vw 2vw #3D0000, -.2vw 0vw 2vw #3D0000;
}

@keyframes heart {
  0%, 100% {
    color: #FBB4FF;
    text-shadow: 
      -.1vw 0vw .25vw #FBB4FF, -.2vw 0vw .25vw #FBB4FF,
      -.1vw 0vw 1vw #E82FF5, -.2vw 0vw .8vw #E82FF5,
      -.1vw 0vw 10vw #CB16FA, -.2vw 0vw 10vw #CB16FA;
  }
  50% {
    color: #8F5493;
    text-shadow: 
      -.1vw 0vw .25vw #8F5493, -.2vw 0vw .25vw #8F5493,
      -.1vw 0vw .8vw #59125E, -.2vw 0vw .8vw #59125E,
      -.1vw 0vw 3vw #42114E, -.2vw 0vw 3vw #42114E;
  }
}