body {
  user-select: none;
  font-family: monospace;
}

ul {
  list-style: none;
}

.clicked {
/*  background-color: #ccc;*/
  animation-name: helloGrow;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#helloWorld {
/*  width: 100%;*/
}

#wantDemos {
  animation-name: wantDemoFadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.demoLi {
  position: relative;
/*  left: -5em;*/
  
  animation-name: demoLiSlide;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

/*   ANIMATIONS    */

@keyframes helloGrow {
  from {
    background-color: white;
/*    top: 0;*/
/*    left: 0;*/
  }
  to {
    background-color: #ccc;
/*    top: 10em;*/
/*    left: 10em;*/
    font-size: 48pt;
/*    text-align: center;*/
  }
}

@keyframes wantDemoFadeIn {
  from {
    color: white;
  }
  to {
    color: black;
  }
}

@keyframes demoLiSlide {
  from {
    color: white;
    left: -10em;
  }
  80% {
    left: 0.5em;
  }
  to {
    left: 0em;
  }
}