index.css

@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
body{
        height: 100vh;
}

.dark{
        background: #1D293A;
}

.main_container{
        height: 90%;
        width: 90%;
        overflow: hidden;
        display: flex;
        border: 2px #1D293A solid;
}
.dflex{
        display: flex;
        justify-content:center;
        align-items:center;
}
.left_dark {
        background: #0F1722;
}
.main_container .left{
        border-right: #0F1722 2px solid;
        height: 100%;
        width: 30%;
        
}
.main_container .right{
        height: 100%;
        width: 70%;
        padding: 10px;
}
.icon_container{
        width: 250px;
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 50px;
        margin: auto;
        justify-content: center;
        border: #0F1722 2px solid;
        border-radius: 13px;
}
.icon_dark{
        background: #151E2B;
}
.icon{
        font-size: 35px;
        display: flex;
        justify-content:center;
        align-items:center;
        height: 80px;
        width: 80px;
        
}
.icon:hover{
        background: #6C63FF;
        color: white;
}
.cal{
        height:100%;
        width: 500px;
        margin: auto;
}
.result{
        text-align: right;
        font-size: 60px;
        margin-right: 70px;
}
.cal-btn button{
        height: 85px;
        width: 85px;
        border-radius: 0px;
        background: #354357;
        color: white;
        font-size: 35px;
}
.cal-btn {
        display: grid;
        grid-template-columns: auto auto auto auto;
        justify-content: center;
        gap: 10px;
}
.zero{
        width: 100% !important;
        grid-column: 1/3;
}