/* Define the CSS for the list items */
ul {
    list-style-type: none;
    padding-left: 20px; /* Add some left padding to space out the dots */
}

li:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%; /* To make a circle */
    margin-right: 10px; /* Add some spacing between the circle and the text */
}

/* Define specific colors for each list item's dot */
li.dot-red:before {
    background-color: rgb(214, 39, 40);
}

li.dot-orange:before {
    background-color: rgb(255, 127, 14);
}

li.dot-blue:before {
    background-color: rgb(31, 119, 180);
}

li.dot-green:before {
    background-color: rgb(44, 160, 44);
}

li.dot-purple:before {
    background-color: rgb(148, 103, 189);
}

li.dot-brown:before {
    background-color: rgb(140, 86, 75);
}

li.dot-yellow:before {
    background-color: yellow;
}

li.dot-lightblue:before {
    background-color: lightblue;
}