feture

This is my Calculator project

 This is CSS sheet(calculator)

.cal-tt1{

    text-align: center;

}

.card{

    margin: 0 auto;

    max-width: 255px;

    text-align: center;

    margin-top: 15px;

    box-shadow: 0 4px 8px 0 rgb(36, 34, 34);

    transition: 0.3s;

    font-size: 0px;

    border: 3px solid rgb(15, 14, 14);

    background-color: rgb(149, 106, 180);

    border-radius: 5px;

}

.card:hover{

    box-shadow: 0 16px 32px 0 rgb(36, 34, 34);

}

.cal-head #result{

    width: 233px;

    height: 75px;

    font-size: 32px;

    text-align: right;

    padding: 0 5px;

    letter-spacing: 1px;

    border: 7px solid black;

}

.butt{

    width: 63px;

    height: 65px;

    font-size: 15px;

    background-color: #1f2326;

    color: white;

}

.butto-st{

    background-color: rgb(132, 196, 6);

}

.butt:hover{

    opacity: .8;

}

This is HTML sheet

<h1 class="cal-tt1">Calculator</h1>

    <div class="card">

        <div class="cal-head">

            <input type="text" maxlength="12" id="result">

        </div>      

        <div class="cal-body">

            <div>

                <input type="button" value="C" class="butt" style="background-color: rgb(8, 177, 8);">

                <input type="button" value="+/-" class="butt butto-st">

                <input type="button" value="%" class="butt butto-st">

                <input type="button" value="/" class="butt butto-st">

            </div>

            <div>

                <input type="button" value="7" class="butt">

                <input type="button" value="8" class="butt">

                <input type="button" value="9" class="butt">

                <input type="button" value="*" class="butt butto-st">

            </div>

            <div>

                <input type="button" value="4" class="butt">

                <input type="button" value="5" class="butt">

                <input type="button" value="6" class="butt">

                <input type="button" value="-" class="butt butto-st">

            </div>

            <div>

                <input type="button" value="1" class="butt">

                <input type="button" value="2" class="butt">

                <input type="button" value="3" class="butt">

                <input type="button" value="+" class="butt butto-st">

            </div>

            <div>

                <input type="button" value="0" class="butt">

                <input type="button" value="." class="butt">

                <input type="button" value="DEL" class="butt" style="background-color: red;">

                <input type="button" value="=" class="butt" style="background-color: rgba(241, 44, 110, 0.473);">

            </div>

        </div>

    </div>