: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: 30rem;
    height: 50rem;
    /* border: 1px solid #000; */
    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: 12.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 {
    display: grid;
    grid-template-areas:
        "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: 6rem;
    height: 6rem;
    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;
}

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

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