*{
    margin:0;    
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.calculator{
    width: 287px;
    border: 1px solid #333;
    background-color: #ccc;
    padding: 5px;
}

.calculator form{
    display: grid;
    grid-template-columns: repeat(4, 65px);
    grid-auto-rows: 65px;
    grid-gap: 5px;
}

.calculator form input{
    border:2px solid #333;
    cursor: pointer;
    font-size: 19px;
}

.calculator form input:hover{
    box-sizing: 1px 1px 1px #333;
}

.calculator form .clar{
    background-color: #be4848;
}

.calculator form .operator{
    background-color: orange;
}

.calculator form .dot{
    background-color: green;
}

.calculator form input[type="text"]{
    grid-column: span 4;
    text-align: right;
    padding:0 10px;
}

.calculator form .clear{
    grid-column: span 3;
    background-color: #be4848;
}

.calculator form .operator result{
    grid-column: span 2;
}