.subtitle,h1 span{display:inline-block;opacity:0}*{margin:0;padding:0;box-sizing:border-box}body{background:#282828;font-family:Arial,Helvetica,serif;font-size:10px}.app-wrapper{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:30rem;text-align:center}h1{color:#fff;font-size:3rem;letter-spacing:-.1rem}h1 span{color:#00c5cd;-webkit-transform:translateY(-3rem);transform:translateY(-3rem);-webkit-animation:slideY;animation:slideY;-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}h1 span:nth-child(2){-webkit-animation-delay:175ms;animation-delay:175ms}.subtitle{color:#fff;font-family:Consolas,"Courier New",Monospaced;font-size:.8rem;-webkit-transform:translateX(3rem);transform:translateX(3rem);-webkit-animation:slideX;animation:slideX;-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.35s;animation-delay:.35s}@-webkit-keyframes slideX{from{-webkit-transform:translateX(3rem);transform:translateX(3rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slideX{from{-webkit-transform:translateX(3rem);transform:translateX(3rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes slideY{from{-webkit-transform:translateY(-3rem);transform:translateY(-3rem);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slideY{from{-webkit-transform:translateY(-3rem);transform:translateY(-3rem);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}