/* The animation code */
@keyframes colours {
    0%   {background-color: red;}
    20%  {background-color: blue;}
    40%  {background-color: yellow;}
    60% {background-color: green;}
    80%   {background-color: pink;}
    /* stopping at 80% makes it smoothly transition to the first frame
    /* 100%  {background-color: yellow;} */
  }
@keyframes spin {
    0%   {transform: rotateZ(0deg);}
    100%   {transform: rotateZ(360deg);}
  }
  
  /* ANIMATIONS */
  /* The element to apply the animation to */
  div.example {
    width: 200px;
    height: 110px;
    margin: auto;
    color: white;
    text-align: center;
    padding-top: 90px;
    font-weight: bold;
    background-color: red;
    animation: colours 1s linear infinite, spin 3s linear infinite;
  }

  /* REFLECTIONS */
  div.reflection-container {
      width: 100%;
      height: 390px;
      background-color: black;
  }

  div.reflection-wrapper {
      margin: auto;
      width: fit-content;
      padding-top: 40px;
      -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004);
  }

  img.reflection-image {
      height: 300px;
      transform-origin: center;
      transform: perspective(800px) rotateY(20deg);
      transition: 0.5s;
  }

  img:hover.reflection-image {
      transform: perspective(800px) rotateY(0deg);
  }