<style>
.tag,
input.filter[type="checkbox"]:after{
border: 1px solid;
padding: 0 10px;
border-radius: 10px;
font-weight: bold;
font-size: 12px;
}
input.filter[type="checkbox"]:after {
display: inline-block;
position: relative;
top: -0.5rem;
left: 1.5rem;
}

.tag[data-diff='hard'],
input.filter.hard[type="checkbox"]:after {
color: #cc4646;
}
input.filter.hard[type="checkbox"]:checked:after {
background-color: #cc4646;
}
.tag[data-diff='hard']:after,
input.filter.hard[type="checkbox"]:after {
content:'Hard';
}

.tag[data-diff='medium'],
input.filter.medium[type="checkbox"]:after{
color: #faa109;
}
input.filter.medium[type="checkbox"]:checked:after{
background-color: #faa109;
}
.tag[data-diff='medium']:after, input.filter.medium[type="checkbox"]:after{
content:'Medium';
}

.tag[data-diff='easy'],
input.filter.easy[type="checkbox"]:after{
color: #1ead3e;
}
input.filter.easy[type="checkbox"]:checked:after{
background-color: #1ead3e;
}
.tag[data-diff='easy']:after,
input.filter.easy[type="checkbox"]:after{
content:'Easy';
}

input.filter[type="checkbox"]:checked:after {
color: white;
}

input.filter[type="checkbox"]{ margin-bottom: 1rem }
input.filter.easy[type="checkbox"]{ margin-right: 6rem }
input.filter.medium[type="checkbox"]{ margin-right: 8rem }
input.filter.hard[type="checkbox"]{ margin-right: 7rem }

/* Perform the filter feature */
#main table tbody tr { display: none; }
#main input.filter.easy[type="checkbox"]:checked ~ table tbody tr.easy { display: table-row; }
#main input.filter.medium[type="checkbox"]:checked ~ table tbody tr.medium { display: table-row; }
#main input.filter.hard[type="checkbox"]:checked ~ table tbody tr.hard { display: table-row; }

</style>