html, body{
  width: 100%;
  height: 100%;
  overflow:hidden;
  margin:0;
  padding:0;
}
body {
	font-family: 'Overpass Mono', monospace;
	color: white;
}

.container {
  width: 100%;
  height: 100%;
  padding: 10%;
  background: linear-gradient(0deg, rgba(212,132,157,0.2) 20%, rgba(212,132,157,0.4) 40%, rgba(212,132,157,0.6) 60%, rgba(212,132,157,0.8) 80%), linear-gradient(-90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,0.2) 20%, rgba(0,0,255,0.4) 40%, rgba(0,0,255,0.6) 60%, rgba(0,0,255,0.8) 80%, rgba(0,0,255,0.2) 100%), rgb(114,204,114);
  background-size: 300% 300%;
  background-position: 0% 0%;
  position: fixed;
  display: block;
  animation: gradient 10s infinite linear;
}
@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

h1 {
  font-weight: 300;
  font-size: 3em;
  mix-blend-mode: difference;
}
@media only screen and (max-device-width: 640px) {
	h1 {
	  font-size: 2.4em;
	  letter-spacing: -1.5px;
	}
}