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

html{
    font-size: 150%;
    font-weight: 300;
    font-family: ' Roboto', Arial, Helvetica, sans-serif;
    line-height: 1.4;
    
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: green;

}

/* calculator */

.calculator{
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0);
    border-radius: .3em;
    overflow: hidden;
    border: 3px solid black; ;
}

.calculator__display {
    background-color: black;
   
    color: grey;
    width: 16.25rem;
    padding: 0.75rem 1rem;
    text-align: right;
    font-size: calc(1rem * 1.2 * 1.2);
}

.calculator__keys {
    background: grey;
    
    grid-gap: 2px;
    display: grid;
    height: 55vh;
    grid-template-columns: repeat(4 ,auto);
    grid-template-areas: 
    ". . . ."
    "seven eight nine equal"
    "four five six equal"
    "one two three equal"
    "zero decimel clear equal";
}

.calculator__keys > button {
    border: 0;
}

.one{ grid-area: one;}
.two{ grid-area: two;}
.three{ grid-area: three;}
.four{ grid-area: four;}
.five{ grid-area: five;}
.six{ grid-area: six;}
.seven{ grid-area: seven;}
.eight{ grid-area: eight;}
.nine{ grid-area: nine;}
.zero{ grid-area: zero;}
.decimel{ grid-area: decimel;}
.clear{ grid-area: clear;}
.equal{ grid-area: equal;
background-color: orange ;
}

.equal:hover, .equal:focus{
    background-color: darkorange;
}

.plus, .minus, .times, .divide{
background: grey;
}

[data-type='operator']{
    background: lightgray;
    font-size: 1em;
    /* font-weight: 800; */
}

[data-type="number"], [data-type="clear"], [data-type="equal"]{
    /* font-weight: 800; */
    font-size: 1em;
}

[data-type="operator"]:hover,
[data-type="operator"]:focus{
background:  #a9a9a9;
;
}

[data-type="number"]:hover,
[data-type="number"]:focus,
[data-type="clear"]:hover,
[data-type="clear"]:focus {
    background:  #a9a9a9;
}


/* [data-state = "selected"]{
    background: grey;
    
} */