body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(135deg, #1c1c1c, #3a3a3a, #1f1f1f);
    font-family: Arial, Helvetica, sans-serif;
}

table {
    border-collapse: separate;
    border-spacing: 8px;
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #d8d8d8 0%,
            #8f8f8f 20%,
            #c7c7c7 45%,
            #6f6f6f 70%,
            #bfbfbf 100%
        );

    border: 2px solid #444;
    border-radius: 18px;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.6),
        inset 0 2px 3px rgba(255, 255, 255, 0.8),
        inset 0 -4px 6px rgba(0, 0, 0, 0.35);
}

td {
    border: none;
}

/* Calculator Display */
#display {
    height: 70px;
    padding: 10px 18px;

    background:
        linear-gradient(
            to bottom,
            #111,
            #252525
        );

    color: #d9ffd9;

    font-size: 34px;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;

    border: 3px solid #555;
    border-radius: 10px;

    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.9),
        0 2px 2px rgba(255, 255, 255, 0.4);

    text-shadow:
        0 0 5px rgba(180, 255, 180, 0.7);

    overflow: hidden;
}

/* Calculator Buttons */
button {
    width: 72px;
    height: 58px;

    border: 1px solid #454545;
    border-radius: 9px;

    background:
        linear-gradient(
            to bottom,
            #f3f3f3 0%,
            #c4c4c4 45%,
            #8d8d8d 55%,
            #b0b0b0 100%
        );

    color: #111;

    font-size: 20px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 8px rgba(0, 0, 0, 0.45),
        inset 0 2px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);

    text-shadow:
        0 1px 1px rgba(255, 255, 255, 0.7);

    transition:
        transform 0.08s ease,
        box-shadow 0.08s ease,
        filter 0.15s ease;
}

/* Hover effect */
button:hover {
    filter: brightness(1.12);
}

/* Pressed button effect */
button:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.5),
        inset 0 3px 5px rgba(0, 0, 0, 0.35);
}

/* Operator buttons */
button[onclick*="setOperator"],
button[onclick*="calculate"] {
    background:
        linear-gradient(
            to bottom,
            #555,
            #2d2d2d 50%,
            #111
        );

    color: white;

    border-color: #111;

    text-shadow:
        0 -1px 1px black;
}

/* Clear buttons */
button[onclick*="clear"] {
    background:
        linear-gradient(
            to bottom,
            #cfcfcf,
            #969696 50%,
            #6c6c6c
        );
}

/* Slight metallic shine over the calculator */
table::before {
    content: "";
    position: absolute;
    pointer-events: none;
}