:checked {
                box-shadow: 0px 0px 5px 2px rgb(156, 205, 156);
            } :indeterminate {
                box-shadow: 0px 0px 5px 2px orange;
            }
        
    

        
            const checks= document.querySelectorAll("input")
            const all= document.getElementById("all")
        
            const notAll= [...checks].filter(item => item.getAttribute("id") !== "all") 
            checks.forEach((item) => {
                item.addEventListener("change", ({ target }) => {
                    if (target.getAttribute("id") === "all") {
                        checks.forEach((item) => (item.checked= target.checked))
                    }
            
                    if (notAll.filter(item => item.checked).length !== notAll.length) {
                        all.indeterminate = true;
                    } else {
                        all.indeterminate = false;
                    }
                });
            });