/*
Simple Grade system in HTML and CSS
You can use it simply by add this stylesheet in your HTML page and using
<span class="grade-X"></span> where X is an integer between 0 and 5 included

Written by Romain de Laage
MIT Licence
*/


*{
    --colored: #10A010;
    --uncolored: #C0C0C0;
}

.grade-0::before{
    content: "";
    color: var(--colored);
}
.grade-0::after{
    content: "■■■■■";
    color: var(--uncolored);
}

.grade-1::before{
    content: "■";
    color: var(--colored);
}
.grade-1::after{
    content: "■■■■";
    color: var(--uncolored);
}

.grade-2::before{
    content: "■■";
    color: var(--colored);
}
.grade-2::after{
    content: "■■■";
    color: var(--uncolored);
}

.grade-3::before{
    content: "■■■";
    color: var(--colored);
}
.grade-3::after{
    content: "■■";
    color: var(--uncolored);
}

.grade-4::before{
    content: "■■■■";
    color: var(--colored);
}
.grade-4::after{
    content: "■";
    color: var(--uncolored);
}

.grade-5::before{
    content: "■■■■■";
    color: var(--colored);
}
.grade-5::after{
    content: "";
    color: var(--uncolored);
}