@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);

html,
body {
  height: 100%;
}

body {
  background: radial-gradient(#1c84e6, #226af0);
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  overflow: hidden;
  padding: 30px 0 0 30px;
  text-align: center;
}

.word {
  bottom: 0;
  color: #eca7f5;
  font-size: 2.5em;
  height: 2.5em;
  left: 0;
  line-height: 2.5em;
  margin: auto;
  right: 0;
  position: absolute;
  text-shadow: 0 0 10px rgba(39, 140, 235, 0.5), 0 0 5px rgba(40, 126, 255, 0.5);
  top: 0
}

.word span {
  display: inline-block;
  transform: translateX(100%) scale(0.9);
  transition: transform 500ms;
}

.word .done {
  color: rgb(178, 67, 243);
  transform: translateX(0) scale(1);
}

.overlay {
  background-image: linear-gradient(transparent 0%, rgba(42, 218, 241, 0.5) 50%);
  background-size: 1000px 2px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}