/* Import google font */
@import url(https://fonts.googleapis.com/css?family=Oswald);

/* Cloud background images */
.clouds-1 {
  background-image: url(https://s.cdpn.io/15514/clouds_2.png);
  animation: clouds-loop-1 20s infinite linear;
}

.clouds-2 {
  background-image: url(https://s.cdpn.io/15514/clouds_1.png);
  animation: clouds-loop-2 15s infinite linear;
}
.clouds-3 {
  background-image: url(https://s.cdpn.io/15514/clouds_3.png);
  animation: clouds-loop-3 17s infinite linear;
}
.clouds-4 {
  background-image: url(https://s.cdpn.io/15514/clouds_3.png);
  animation: clouds-loop-3 17s infinite linear;
}


/* Keyframes for cloud animations */
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}

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

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

html, body {
  font-family: sans-serif;
  padding: 0;
  margin:  0;
}

body {
  @include background(linear-gradient(#333, #000));
  text-align: center;
  &, a { color: #cccccc; }
}

h1.quote {
  @include transform(translate(-50%, -50%));
  @include inline-block;
  text-align:      right;
  text-decoration: none;
  font-family:     'Oswald', sans-serif;
  font-weight:     normal;
  position:        absolute;
  top:             50%;
  left:            50%;
  font-size:       1.5em;
  line-height:     1.5em;
  margin:          0;
  text-shadow:     0 -1px 0  #ffffff,
                   0 2px 3px #000000;

  span { display: block; }
}

section.info {
  position:  absolute;
  bottom:    0;
  right:     2ch;
  font-size: 60%;
  
  dl {
    @include display-flex;
    
    dt, dd {
      margin:  0;
      padding: 0;
    }

    dt { padding-right: 1ch; }
    dd { padding-right: 4ch; }
  }
}
  
.clouds {
  @include opacity(0.4);
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top:      0;
  left:     0;
  right:    0;
  height:   80vh;
  z-index: -1;
}  

.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top:      50;
  right:    0;
  left:     0;
  height:   80vh;
}
.clouds-4 {
  background-repeat: repeat-x;
  position: absolute;
  top:      0;
  right:    0;
  left:     0;
  height:   100vh;
  transform: scaleY(-1);
}
.content,.desc,.notify-btn{
  margin-top: 3%;
}