@keyframes swag {
  to { text-shadow: 0 0 4px black; }
  from { text-shadow: 4px 8px 15px black; }
}

@keyframes swing {
  to { transform: translateX(-50%) translateY(-50%) scale(0.2) rotate(0); }
  from { transform: translateX(-50%) translateY(-50%) scale(2.5) rotate(360deg); }
}

@keyframes swipe {
  to { opacity: 0.5; }
  from { opacity: 1.0; }
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

.gradient {
  position: fixed;
  top: 0;
  left; 0;
  width: 100%;
  height: 100%;
  animation-name: swipe;
  animation-duration: 3.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.gradient.a {
  background: linear-gradient(to right top, #7e40ff, #755fff, #7377ff, #778bff, #839eff);
  animation-direction: alternate;
}

.gradient.b {
  background-image: linear-gradient(to right top, #ffaf7c, #ff9a62, #ff844a, #ff6b35, #ff4c22);
  animation-direction: alternate-reverse;
}

.site-message {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;

  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 120px;
  color: #363942;
  text-shadow: 1px 2px #666;
  text-align: center;
  animation-name: swag, swing;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}