body
{
   background-color: #222;
   color: #ddd;
}
div
{
   display: flex;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
   padding: 0 4%;
}
.success
{   
   background-clip: border-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px 70px #ffd800;
   background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
   animation: glow-animation 2.5s infinite linear;
   box-sizing: border-box;
}
@keyframes glow-animation
{
   0%
   {
      filter:hue-rotate(-360deg)
   }
   100%
   {
      filter:hue-rotate(360deg)
   }
}
@keyframes brightness-animation
{
   0%
   {
      filter:brightness(1)
   }
   30%
   {
      filter:brightness(0.5)
   }
   100%
   {
      filter:brightness(1)
   }
}
.fail
{
    color: #ccc;
    animation: brightness-animation 8s infinite linear;
}
.fail-img {
    width: 20%;
    margin: 0 2%;
}
.right-img {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
.success-img {
    width: 20%;
}
.checkmark-success {
    stroke: #4bb71b;
}
.checkmark-error {
    stroke: red;
}
.checkmark {
    width: 25%;
    height: 25%;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    fill: #222;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}