*,
*::before,
*::after {
  box-sizing: border-box;
}

.titrepol {
        font: italic small-caps bold 40px/2 cursive;

}

.hero {
  position: relative;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 12rem 2rem;
  color: white;

 background-image: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(black)),
  url("https://cdn.radiofrance.fr/s3/cruiser-production/2019/08/b5b50d60-4390-45d9-b7d0-d2f5c6588e50/1136_050_only_0389455.webp");

  background-blend-mode: multiply;
  background-size: cover;
}

.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

.scroll {
  -webkit-animation-name: scroll;
          animation-name: scroll;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
          animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 20.5px;
          transform-origin: 50% 20.5px;
  will-change: transform, opacity;
  opacity: 1;
}

.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@-webkit-keyframes scroll {
  0%, 20% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(36px) scaleY(2);
            transform: translateY(36px) scaleY(2);
    opacity: 0;
  }
}

@keyframes scroll {
  0%, 20% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(36px) scaleY(2);
            transform: translateY(36px) scaleY(2);
    opacity: 0;
  }
}