body{
  background: linear-gradient(270deg, #7a7a7a, #000000);
  background-size: 400% 400%;

  -webkit-animation: YcAnimation 8s ease infinite;
  -moz-animation: YcAnimation 8s ease infinite;
  animation: YcAnimation 8s ease infinite;
}

.title{
    text-align: center;
    font-style: oblique;
    color: antiquewhite;
    font-family: monospace;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-style: oblique;
    color: antiquewhite;
    font-family: monospace;
    font-size: 10px;
  }


@media screen and (min-width: 601px) {
	.h1yc {
	  font-size: 35px;
	}
	.h3yc {
		font-size: 15px;
	  }
      .hfyc{
        font-size: 10px;
      }

  }
  
 
  @media screen and (max-width: 601px) {
	.h1yc {
	  font-size: 20px;
	}
	.h3yc {
		font-size: 10px;
	  }
      .hfyc{
        font-size: 5px;
      }
  }

 @-webkit-keyframes YcAnimation {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}
@-moz-keyframes YcAnimation {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}
@keyframes YcAnimation {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}