@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Lato');

/* What do you have to be scared of?
 *
 * Lorin Tackett, July 2013
 * http://lorintackett.com 
 */
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}

.clouds-1 {
  background-image: url("clouds_1.png");
  animation: clouds-loop-1 30s infinite linear;
}

@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}

.clouds-2 {
  background-image: url("clouds_2.png");
  animation: clouds-loop-2 25s infinite linear;
}

@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}

.clouds-3 {
  background-image: url("clouds_3.png");
  animation: clouds-loop-3 18s infinite linear;
}

html, body {
  font-family: 'Lato', sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #61C2F7), color-stop(100%, #016BB0));
  background: -webkit-linear-gradient(#61C2F7, #016BB0);
  background: -moz-linear-gradient(#61C2F7, #016BB0);
  background: -o-linear-gradient(#61C2F7, #016BB0);
  background: linear-gradient(#61C2F7, #016BB0);
  text-align: center;
  vertical-align: middle;
  
}




body a {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  text-shadow: 0 -1px 0 rgba(250, 248, 245, 0.6), 0 2px 3px black;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 1.8em;
  margin: 0;
  color: #fff;
}
body a span {
  display: block;
}

.moondah  {
font-family: 'Covered By Your Grace', cursive;
color: #ffffff;
font-size: 3.8em;
opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.farhorizons {
font-family: 'Lato', sans-serif;
letter-spacing: 1em;
font-size: 0.9em;

}

.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 315px;
}