body {
    background-color: #757474;
    font-family: 'Arial', sans-serif;
    padding: 50px;
    color: #fff;
}

table {
    border-collapse: collapse;
    background-color: #1E1E1E;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

input[type="text"] {
    width: 100%;
    height: 80px;
    text-align: right;
    font-size: 32px;
    padding: 10px;
    border: none;
    background-color: #2C2C2C;
    color: #fff;
    box-sizing: border-box;
}

input[type="button"] {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

input[type="button"]:hover {
    transform: scale(1.1);
}

input[value="+"], 
input[value="-"], 
input[value="×"], 
input[value="÷"], 
input[value="^"], 
input[value="%"] {
    background-color: #FF9500;
    color: white;
}

input[value="="] {
    background-color: #34C759;
    color: white;
}

input[value="del"] {
    background-color: #FF3B30;
    color: white;
}

input[value="0"], 
input[value="1"], 
input[value="2"], 
input[value="3"], 
input[value="4"], 
input[value="5"], 
input[value="6"], 
input[value="7"], 
input[value="8"], 
input[value="9"], 
input[value="."] {
    background-color: #3A3A3A;
    color: white;
}