checkbox menu

<style>
.checkbox {
padding-left: 3px;
text-align: left;
line-height: 1.6em;
}

@media only screen and (max-width: 600px) {
.checkbox {
line-height: 1.4em;
}
}

.checkbox label {
margin-left: 5px;
background: linear-gradient(90deg, #ED9ABD 0%, #FF6BA9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.2em;
letter-spacing: 0.5px;
-webkit-filter: drop-shadow(0px 0px 2px #fff);
display: inline-block;
transition: .4s;
}

@media only screen and (max-width: 600px) {
.checkbox label {
margin-left: 1px;
}
}

.checkbox label:hover {
letter-spacing: 1.5px;
}

.cb {
accent-color: #FF96C2;
}

.cb:hover {
accent-color: #FF96C2;
transform: scale(1.2);
transition: all 0.3s;
}

</style>

<div class="checkbox">
<input class="cb" name="index" type="checkbox" id="example1" onclick="location.href='#';" onchange="cbChange(this)"/><label for="example1">Index</label>
<br>
<input class="cb" name="rules" type="checkbox" id="example2" onclick="location.href='#one';" onchange="cbChange(this)"/><label for="example2">Rules</label>
<br>
<input class="cb" name="carrds" type="checkbox" id="example3" onclick="location.href='#two';" onchange="cbChange(this)"/><label for="example3">Carrds</label>
<br>
<input class="cb" name="admin" type="checkbox" id="example4" onclick="location.href='#three';" onchange="cbChange(this)"/><label for="example4">Admin</label>
</div>
<script>
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
</script>