land.css

* $fly-in-time: 3s;
$hover-bezier: cubic-bezier(0.57, 0.19, 0.25, 0.75);
$spacing-unit: 28px;

/* Base Styles */
body {
  background: #545454;
}

.container {
  margin-top: $spacing-unit;
  max-height: 560px;
  overflow: hidden;
  width: 100%;
}

/* SVG Styles */
#robot {
  animation: fly-in $fly-in-time ease-out;
  max-height: 560px;
  width: 100%;
}

.arm,
.leg {
  animation: dangle 3s $hover-bezier infinite;
  transform-origin: 50% 0%;
}

.head {
  animation: attach-head $fly-in-time linear;
}

.flame {
  animation: flicker 0.35s linear infinite;
  transform-origin: 50% 50%;
}

.lean {
  animation: lean $fly-in-time linear;
  transform-origin: 50% 0%;
}

.levitate {
  animation: levitate 3s $hover-bezier infinite;
  transform-origin: 50% 50%;
}

.smoke {
  animation: smoke 0.25s linear infinite;
  transform-origin: 50% 50%;
}

.smoke-group {
  animation: track-levitate 3s $hover-bezier infinite;
  animation-delay: 0.25s;
}

// Animation delay classes
@for $i from 2 through 10 {
  .delay-#{$i} {animation-delay: 0.03s * $i;}
}

// Keyframe animations
/* 
  Flicker courtesy of:
  http://codepen.io/ghen/pen/pvwOwM
*/
@keyframes flicker {
  0% {transform: rotate(-1deg);}
  25% {transform: rotate(1deg) scaleY(1.15);}
  50%, 100% {transform: rotate(1deg);}
  75% {transform: rotate(-2deg) scaleY(0.95);}
  
}

@keyframes smoke {
  from {transform: scale(0.95);}
  to {transform: scale(1.15);}
}

/*
  Rotating hover courtesy of:
  http://lea.verou.me/2012/02/moving-an-element-along-a-circle/ 
*/
@keyframes levitate {
  from {transform: rotate(0deg) translate(-15px) rotate(0deg);}
	to {transform: rotate(360deg) translate(-15px) rotate(-360deg);}
}

@keyframes track-levitate {
  0%, 100% {transform: translateX(-20px);}
  50% {transform: translateX(0);}
}

@keyframes dangle {
  0%, 100% {transform: rotate(0deg);}
  33% {transform: rotate(10deg);}
  66% {transform: rotate(-10deg);}
}

@keyframes lean {
  0%, 100% {transform: rotate(0deg) translateX(0px);}
  20% {transform: rotate(-30deg) translateX(-130px);}
  80% {transform: rotate(-30deg) translateX(-130px);}
}

@keyframes attach-head {
  0%, 100% {transform: translate(0px 0px);}
  20% {transform: translate(-130px, 60px);}
  80% {transform: translate(-130px, 60px);}
}

@keyframes fly-in {
  0% {transform: translateX(2000px);}
  100% {transform: translateX(0px);}
}

{
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

body {
  font: 12px "Monaco", Inconsolata, monospace;
  background: #083952;
  color: #f8f8f8;
}

.terminal {
  background: transparent;
  position: relative;
  left: 10%;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.4);
  width: 250px;
  font: inherit;
  border: none;
  outline: none;
  color: inherit;
}

.dollar:before {
  content: '$';
  color: #52a563;
}

.home {
  color: #e28d47;
  padding-bottom: 3px;
}

a {
  font: 12px "Monaco", Inconsolata, monospace;
  text-decoration: underline;
  color: #f8f8f8;
}