body {
  height: 100vh;
  margin: 0;
}

footer {
  justify-content: center;
  text-align: center;
  font-family: monospace;
  text-decoration: none;
  font-size: 0.8rem;
}

.footer-link {
  color: #d63384;
  font-family: monospace;
  text-decoration: none;
  font-weight: 600;
  text-shadow: none;
}

/* hover */
a:hover {
  color: #337ad6;
  opacity: 0.8;
}

#title {
  background-color: rgb(255, 255, 255, 0.6);
  border-radius: 30px;
  padding: 5%;
}

#background {
  background-image: url(images/compra.jpg);
  background-size: cover;
  background-position: 150px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 15s linear infinite alternate;
}

/* Animation */
/* moving background */
@keyframes animatedBackground {
  from {
    background-position: 0 20%;
  }
  to {
    background-position: 0 0;
  }
}

/* fadeInOut */
#title {
  animation: fade 2s ease-in forwards;
}

@keyframes fade {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.top-section {
  position: sticky;
  top: 0;
  translate: 0 calc(-1% * (max(var(--scroll), 25) - 25) * 100 / 75);
}

.img-top {
  --value: min(var(--scroll), 30) * 50 / 30;
  width: cal(50vw + 1vw * var(--value));
}