@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes fade {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

body{
    width:100%;
    height:100vh;
    margin:0;
    padding:0;
    background:#13131a;
}

.gradient-background {
  background: linear-gradient(300deg,#2f313b,#1f2028,#121319,#3f424f);
  background-size: 240% 240%;
  animation: gradient-animation 40s ease infinite;
  height:100vh;  
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
}

.middle{
    text-align:center;
    animation: fade 3s ease;    
}

img{
    display:inline-block;
    margin: auto;
    width:200px;
}

span{
    display:block;
    color:#fff;    
    text-align:center;
    width:100%;
    font-weight:300;
    font-family: 'Co Headline';
    letter-spacing: 1px;
    font-size: 17px;
    transform:translateY(60px);
}