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

body{
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
}

main{
    width: max-content;
    height: max-content;
    display: grid;
    grid-template-areas: 
    'screen screen screen clear'
    'seven eight nine plus'
    'four five six minus'
    'one two three multiply'
    'equals zero dot divide';
    gap: 5px;
    border: 2px grey solid;
    padding: 5px;
}

.screen{
    width: 100%;
    height: 100%;
    outline: none;
    border: 1px solid;
    border-radius: none;
}

.btn{
    width: 50px;
    height: 50px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 100;
    color: white;
    background-color: grey;
}

.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;
}
.multiply{
    grid-area: multiply;
}
.minus{
    grid-area: minus;
}
.plus{
    grid-area: plus;
}
.divide{
    grid-area: divide;
}
.equals{
    grid-area: equals;
}
.dot{
    grid-area: dot;
}
.clear{
    grid-area: clear;
}
.screen{
    grid-area: screen;
}