@font-face {
    font-family: "JetBrains Mono";
    src: url(./fonts/JetBrainsMono-VariableFont_wght.ttf) format("truetype");
    font-weight: 400 700;
}

:root {
    --primary-clr: #212121;
    --secondary-clr: #505050;
    --tertiary-clr: #f69906;
    --white-clr: #fefefe;
    --body-bg: #efe8de;
}

@layer reset {
    *,
    ::before,
    ::after {
        box-sizing: border-box;
        margin: 0;
    }

    body {
        background-color: var(--body-bg);
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@layer calculator {
    #calculator {
        display: grid;
        grid-template-rows: 1fr 2fr;
        background-color: var(--primary-clr);
        color: var(--white-clr);
        width: 350px;
        height: 600px;
        max-width: 350px;
        padding: 1rem;
        border-radius: 1rem;
        font-family: "JetBrains Mono";
        font-weight: 700;
        user-select: none;
    }

    .screen {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        padding-block: 3rem 2rem;
    }

    .main-display,
    .secondary-display {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        flex: 1;
        /*height: 80px;*/
        padding-inline: 1rem;
    }

    .main-display {
        background-color: var(--primary-clr);
        max-width: 350px;
        font-size: 1.75rem;
    }

    .secondary-display {
        background-color: var(--primary-clr);
        font-size: 1.25rem;
    }

    .keyboard {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .key {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--secondary-clr);
        text-align: center;
        font-size: 1.75rem;
        border-radius: 7px;
    }
    .key.operator,
    .key.erase {
        background-color: var(--tertiary-clr);
    }

    .span-two-columns {
        grid-column: 1 / 3;
    }

    .span-two-rows {
        grid-column: 4 / 4;
        grid-row: 6 / 4;
    }

    .del-icon {
        fill: var(--white-clr);
        pointer-events: none; /* Extremely important for when using an svg for backspace and the key to work when clicked */
    }
}