#captcha {
    font-size: 30px;
    font-weight: bold;
    color: #f5127cf5;
    text-align: center;
    transform: skew(-10deg, -5deg);
    display: inline-block;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #cccccc7c;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bolder;

}

#captcha .char {
    display: inline;   
}

#captcha .char:nth-child(1) { color: #FF5733; }  
#captcha .char:nth-child(2) { color: #33FF57; }  
#captcha .char:nth-child(3) { color: #3357FF; } 
#captcha .char:nth-child(4) { color: #FF33A1; } 
#captcha .char:nth-child(5) { color: #ff6d33; } 
#captcha .char:nth-child(6) { color: #33FFFF; }  
#captcha .char:nth-child(7) { color: #FF3333; } 
#captcha .char:nth-child(8) { color: #9933FF; }  
#captcha .char:nth-child(9) { color: #ff3333; }  
#captcha .char:nth-child(10) { color: #33FF99; } 

#captcha:before, #captcha:after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
}

#captcha:before {
    transform: rotate(10deg);
    left: -20px;
    top: -20px;
    z-index: 1;
}

#captcha:after {
    transform: rotate(-10deg);
    left: 20px;
    top: 20px;
    z-index: 1;
}

#captcha span {
    display: block;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    transform: rotate(-3deg);
    animation: distort 3s infinite;
}

@keyframes distort {
    0% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(-3deg);
    }
}