Calculator using html css

HTML CODE

<div>
        <input type="text" class="in">
        <ul>
            <li>AC</li>
            <li>%</li>
            <li>C</li>
            <li>/</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>*</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>+</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>-</li>
            <li>00</li>
            <li>0</li>
            <li>.</li>
            <li class="equal">=</li>
        </ul>
    </div>

css code

 ul{
        list-style: none;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap:10px;
    }
    li{
        background-color: #393939;
        color:white;
        border-radius: 100%;
        align-content: center;
        font-size:x-large;
        text-align:center;
        height: 60px;
        width: 60px;
        cursor: pointer;
    }
    div{
        width: 300px;
        margin: auto;
    }
    .equal{
        background-color: orange;
    }
    .in{
        width:340px;
        padding: 5px;
    }