calculator.css

body {
    height: 97vh;
    width: 97vw;
}

#calculator {
    position: relative;
    margin: auto;
    top: 5%;
    height: 90%;
    width: 40%;
    border: 2px solid black;
}

#screen {
    display: flex;
    position: relative;
    margin: auto;
    top: 2%;
    height: 15%;
    width: 80%;
    justify-content: right;
    align-items: center;
    font-size: 4rem;
    overflow: hidden;
    border: 2px solid black;
}

#clear-button {
    display: flex;
    position: relative;
    top: 4%;
    height: 10%;
    width: 80%;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

#button-grid {
    position: relative;
    display: grid;
    top: 8%;
    margin: auto;
    grid-template-columns: 21% 5% 21% 5% 21% 5% 21%;
    grid-template-rows: 21% 5% 21% 5% 21% 5% 21%;
    height: 65%;
    width: 96%;
    border: 2px solid black ;
}

.number-button {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}