@import url('http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:400,600,700,800');

$accent1: #ea4c89;
$accent2: #f1c40f;
$accent3: #39a4ff;
$border: rgba(0,0,0,.6);

body {
  background-image: url(http://goo.gl/DGxaw0),
    				linear-gradient( 45deg,$accent1,transparent),
    				linear-gradient(135deg,$accent2,transparent),
    				linear-gradient(225deg,$accent3,transparent),
    				linear-gradient(315deg,$accent1,transparent);
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: difference;
}
h1 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 50vh;
  margin: auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 8vw;
  color: $accent3;
  font-weight: 800;
  line-height: 50vh;
  text-align: center;
  font-smoothing: antialiased;

  -webkit-text-stroke-width: .3vw;
  -webkit-text-stroke-color: $border;
  
  &:nth-child(1) { transform: translate(-40px,40px); }
  &:nth-child(2) { transform: translate(-30px,30px); }
  &:nth-child(3) { transform: translate(-20px,20px); }
  &:nth-child(4) { transform: translate(-10px,10px); }
  
  &:nth-child(5) {
    background-image: linear-gradient(-45deg,$accent3 0%,$accent3 10%,$accent1 10%,$accent1 25%,
                                             $accent3 25%,$accent3 35%,$accent2 35%,$accent2 50%,
                                             $accent3 50%,$accent3 60%,$accent1 60%,$accent1 75%,
                                             $accent3 75%,$accent3 85%,$accent2 85%,$accent2 100%);
    background-size: 50px 50px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slide 1s linear infinite;
  }
}
@keyframes slide { to { background-position: 50px 50px; } }