:root {
    --color-bg: #000;
    --color-orange: #ff9501;
    --color-grey: #a6a6a6;
    --color-white: #fdfdfd;
}

html {
    font-size: 62.5%;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calc {
    width: 40rem;
    height: 60.5rem;
    border-radius: 2rem;
    background: var(--color-bg);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1.8rem;
    box-shadow: .4rem .4rem .4rem #4f4f4f;
}

.calc-screen {
    height: 9.5rem;
    padding: 1rem;
    display: grid;
    justify-items: end;
    align-items: end;
    margin-bottom: 2.5rem;
}

.calc-screen p {
    font-size: 6.4rem;
    margin: 0;
}

.buttons {
    width: 36.5rem;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "ac del sqrt pow"
        "division multiply minus plus"
        "seven eight nine plus-minus"
        "four five six equal"
        "one two three equal"
        "zero zero dot equal";
    /* "ac plus-minus percent division"
        "seven eight nine multiply"
        "four five six minus"
        "one two three plus"
        "zero zero dot equal"; */
    gap: .7rem;
    align-items: center;
    justify-items: center;
}

.btn {
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    border-radius: 50%;
    font-size: 2.4rem;
    cursor: pointer;
    user-select: none;
}

.btn:hover {
    filter: brightness(120%);
}

.btn:active {
    filter: brightness(90%);
}

.zero {
    grid-area: zero;
    width: 100%;
    border-radius: 3.4rem;
}

.equal {
    grid-area: equal;
    height: 100%;
    border-radius: 3.4rem;
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-orange {
    background-color: var(--color-orange);
}