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


      .card {
        position: relative;
        color: #fff;
        overflow: hidden;
        border-top: 1px solid rgba(152 , 164 , 27, 0.5);
        border-right: 1px solid rgba(152 , 164 , 27, 0.5);
        border-bottom: 1px solid rgba(152 , 164 , 27, 0.5);
        border-left: 1px solid rgba(152 , 164 , 27, 0.5);
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 20px;
		font-color:#858478;
      }

  /*    p {
        font-size: 0.95rem;
        text-align: justify;
      }*/

     span {
        position: absolute;
        border-radius: 100vmax;
      }
	  

      .top {
        top: 0;
        left: 0;
        width: 0;
        height: 5px;
        background: linear-gradient(
          90deg,
          transparent 50%,
          rgba(152 , 164 , 27, 0.5),
          rgb(152 , 164 , 27)
        );
      }

      .bottom {
        right: 0;
        bottom: 0;
        height: 5px;
        background: linear-gradient(
          90deg,
          rgb(152 , 164 , 27),
          rgba(152 , 164 , 27, 0.5),
          transparent 50%
        );
      }

      .right {
        top: 0;
        right: 0;
        width: 5px;
        height: 0;
        background: linear-gradient(
          180deg,
          transparent 30%,
          rgba(152 , 164 , 27, 0.5),
          rgb(152 , 164 , 27)
        );
      }

      .left {
        left: 0;
        bottom: 0;
        width: 5px;
        height: 0;
        background: linear-gradient(
          180deg,
          rgb(152 , 164 , 27),
          rgba(152 , 164 , 27, 0.5),
          transparent 70%
        );
      }

      .top {
        animation: animateTop 3s ease-in-out infinite;
      }

      .bottom {
        animation: animateBottom 3s ease-in-out infinite;
      }

      .right {
        animation: animateRight 3s linear infinite;
      }

      .left {
        animation: animateLeft 3s ease-in-out infinite;
      }

      @keyframes animateTop {
        25% {
          width: 100%;
          opacity: 1;
        }

        30%,
        100% {
          opacity: 0;
        }
      }

      @keyframes animateBottom {
        0%,
        50% {
          opacity: 0;
          width: 0;
        }

        75% {
          opacity: 1;
          width: 100%;
        }

        76%,
        100% {
          opacity: 0;
        }
      }

      @keyframes animateRight {
        0%,
        25% {
          opacity: 0;
          height: 0;
        }

        50% {
          opacity: 1;
          height: 100%;
        }

        55%,
        100% {
          height: 100%;
          opacity: 0;
        }
      }

      @keyframes animateLeft {
        0%,
        75% {
          opacity: 0;
          bottom: 0;
          height: 0;
        }

        100% {
          opacity: 1;
          height: 100%;
        }
      }