body {
  background: linear-gradient(-45deg, #de5a5a, #7e838e, #de5a5a);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	text-align: center;
}

h1 {
	color: #555555;
	font-weight: 300;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal; 
	font-variant: normal; 
}

a {
  display: inline-block;
  color: #555555;
  transform: rotateY(0deg);
  transition: transform 0.2s ease-in-out, color 0.2s linear;
}

@media only screen and (min-width: 320px) {

  a {	font-size: 7.5vw; margin: 0 50px;	}
	h1 {	font-size: 10vw;	}

}

@media only screen and (min-width: 1025px) {

	a {	font-size: 30px; margin: 0 10px;	}
	h1 {	font-size: 36px; }

}

a:hover {
  color: #de5a5a;
  transform: rotateY(360deg);
  transition: transform 0.6s ease-in-out, color 0.4s linear;
}

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