.line{
        width: 100%;
        background: #fff;
        height: 30px;
        border-radius: 5px;
        position: relative;
}


.html{
        background: linear-gradient(to  left , rgb(0, 75, 187),tomato);
        width: 80%;
        height: 100%;
}

.css{
        background: linear-gradient(to  left , rgb(0, 238, 255),rgb(255, 145, 0));
        width: 75%;
        height: 100%;
}

.js{
        background: linear-gradient(to  left , rgb(255, 208, 0),rgb(0, 255, 21));
        width: 30%;
        height: 100%;
}

.other{
        background: linear-gradient(to  left , rgb(50, 19, 163) ,rgb(212, 0, 255));
        width: 50%;
        height: 100%;
}

.commment-html{
        transition: .6s ease all;
        position: absolute;
        opacity: 0;
        color: #fff;
        font-family: var(--text--);
        top: 5px;
        left: 50%;
        font-size: 18px;
        cursor: pointer;
}

.other .commment-html{
        left: 30%;
}

.js .commment-html{
        left: 20%;
}


.line:hover .commment-html{
        opacity: 1;
}

.channel a img{
        margin-left: 40px;
        transition: .6s ease all;
}

.channel a img:hover{
        transform: rotateZ(360deg);
}