/**
 * (c) Hahadlines.news
 */
 
body {
  background: #111;
  color: #eee;
  text-align: center;
  padding: 0;
  margin: 0;
}

.wrapper {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

h1 {
  margin: 0;
}

lottie-player {
  margin: 0 auto;
  width: 100%;
}

.latest-strip {
  filter: contrast(0.7) brightness(1.3) contrast(1.2) saturate(1.2);
  max-width: 50%;
  margin: 0 auto;
}

footer {
  width: 100%;
  text-align: center;
  padding: 3em 0;
}

footer a {
  color: #eee;
  text-decoration: underline;
}

footer a:hover {
  text-decoration: none;
}

@media screen and (max-width: 640px) {
	.wrapper {
    min-height: 100vh;
    max-width: 100vw;
	}
	
	.latest-strip {
	  max-width: 90%;
	}
}

/* Apply this class to any block-level element (e.g., a <div>) */
.animated-gradient {
  /* Define a multi-stop linear gradient */
  background: linear-gradient(
    270deg,
    #ff6e7f,
    #bfe9ff,
    #6ffcb0,
    #ffec6f
  );
  /* Make the gradient much larger than the container */
  background-size: 800% 800%;
  /* Animate the background-position to create the shifting effect */
  animation: gradientShift 15s ease infinite;
}

/* Keyframes for the gradient movement */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}