Untitled

export const Card = styled.div`
  background-image: url('/BlueCard@1.0x.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: contain;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 25px;

  &:before {
    content: '';
    z-index: 10;
    position: absolute;
    width: 15%;
    height: 54%;
    top: 0%;
    right: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 10%,
      rgba(255, 255, 255, 0.1) 20%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0.18) 40%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0.18) 60%,
      rgba(255, 255, 255, 0.15) 70%,
      rgba(255, 255, 255, 0.1) 80%,
      rgba(255, 255, 255, 0.05) 90%,
      transparent 100%
    );
    /* border: 2px solid blue;  */
    transition: all 2s;
    transform: rotate(16deg);
    animation: shine 4s forwards;
    /* animation-delay: 2s; */
  }

  @keyframes shine {
    0% {
      top: 23%;
      right: 40%;
      opacity: 0;
    }

    50% {
      top: 22%;
      right: 60%;
      opacity: 1;
    }

    80% {
      top: 21%;
    }

    90% {
      top: 20%;
      right: 80%;
      /* opacity: 0.2; */
    }

    95% {
      top: 19%;
    }

    100% {
      opacity: 0;
      right: 100%;
    }
  }

  @media screen and (min-width: 500px) {
    @keyframes shine {
      0% {
        top: 24%;
        right: 30%;
      }

      50% {
        top: 20%;
        right: 60%;
        opacity: 1;
        /* border: 2px solid red; */
      }

      95% {
        top: 20%;
      }

      100% {
        opacity: 0;
        right: 100%;
      }
    }
  }

  @media screen and (min-width: 600px) {
    @keyframes shine {
      0% {
        top: 24%;
        right: 20%;
      }

      50% {
        top: 20%;
        right: 60%;
        opacity: 1;
        /* border: 2px solid red; */
      }

      95% {
        top: 20%;
      }

      100% {
        opacity: 0;
        right: 100%;
      }
    }
  }
`