I'm designing a webpage and want to change the colour of the bullet in the unordered list to red and increased its size. I've searched on Google but haven't found out a way how to do this. I would also like to put some distance between the image and the paragraph text. [![enter image description here](https://i.stack.imgur.com/AJmmN.png)](https://i.stack.imgur.com/AJmmN.png)

Below is the code I've typed:

```
<!DOCTYPE html>
<html>
<head>
    <style>
    h1 {
        text-align: center;
       }

    h5 {
         text-align: center;
       }

    body {
           background-color: #FAFAFA;
         }

    </style>
</head>

<body>

    <h1>About Me</h1>
    <h5>Hanjour and Haznawi</h5>

    <div style="text-align: right">
    <img src ="aine.jpg" alt ="personal" width="200" length="200" style="float: left;">
    </div>

        <li>
        <ol>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</ol>
        </li>

</body>
</html>

```