/*
* Commented out this styling for when I add the calculator to my WordPress site.
*
body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("desktop-background.png");
    background-size: fill;
}*/

.calculator-container {
    box-sizing: border-box;
    padding: 25px;
    width: 100%;
    max-width: 400px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.calculator {
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    background-color: white;
}

.calculator--screen {
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 20px;
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px 0 0;
    font-family: "Orbitron", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.2em;
}

.calculator--screen:focus {
    outline: none;
}

/* Button grid */
.calculator--buttons {
    box-sizing: border-box;
    padding: 11px;
    height: 80vh;
    max-height: 210px;
    min-height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    column-gap: 4px;
    row-gap: 4px;
}

/* Reset styles for buttons */
.calculator--button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none
}

.calculator--button {
    font-family: "Orbitron", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #474747;
    border-radius: 6px;
    background-color: #eeeeee;
    transition: all 0.3s;
    outline: none;
}

.calculator--button:focus-visible {
    outline: solid blue;
}

.calculator--button__operator {
    font-size: 20px;
}

.calculator--button:hover {
    background-color: #e4e4e4;
}

.calculator--button:active {
    background-color: #cdcdcd;
}

.calculator--button__number {
    background-color: #d6d6d6;
    font-weight: 700;
}

.calculator--button__number:hover {
    background-color: #c3c3c3;
}

.calculator--button__number:active {
    background-color: #9c9c9c;
}

.calculator--button__equal {
    color: white;
    background-color: #e47837;
}

.calculator--button__equal:hover {
    background-color: #e9935f;
}

.calculator--button__equal:active {
    background-color: #a05427;
}

.calculator--button[value="0"] {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.calculator--button[value="1"] {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.calculator--button[value="2"] {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.calculator--button[value="3"] {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.calculator--button[value="4"] {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.calculator--button[value="5"] {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.calculator--button[value="6"] {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.calculator--button[value="7"] {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.calculator--button[value="8"] {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.calculator--button[value="9"] {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.calculator--button[value="."] {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.calculator--button[value="+"] {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
}

.calculator--button[value="-"] {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.calculator--button[value="/"] {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.calculator--button[value="*"] {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.calculator--button[value="clear"] {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

.calculator--button[value="equals"] {
    grid-column: 5 / 6;
    grid-row: 1 / 5;
}