/* General body styling */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #121212; /* Dark background */
    color: #ffffff; /* White text for contrast */
}

/* Calculator container styling */
.calculator {
    background: #1e1e1e; /* Dark gray background for calculator */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    width: 320px;
}

/* Display box styling */
.display-box {
    margin-bottom: 20px;
}

.input {
    width: 100%;
    height: 60px;
    font-size: 2rem;
    text-align: right;
    border: none;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #2c2c2c; /* Slightly lighter dark background */
    color: #ffffff; /* White text for readability */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Buttons container styling */
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Button styling */
button {
    margin: 10px;
    padding: 20px;
    height: 60px;
    font-size: 1.2rem;
    border: none;
    border-radius: 10px;
    background: #333333; /* Dark button background */
    color: #ffffff; /* White button text */
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Button hover and active states */
button:hover {
    background: #444444; /* Slightly lighter on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Deeper shadow on hover */
}

button:active {
    background: #555555; /* Lighter when active */
    transform: translateY(0); /* Return to original position */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Softer shadow */
}

/* Highlight operation buttons */
button:nth-child(4),
button:nth-child(8),
button:nth-child(12),
button:nth-child(16),
button:nth-child(20) {
    background: #ff5722; /* Accent color for operations */
    color: #ffffff;
}

button:nth-child(4):hover,
button:nth-child(8):hover,
button:nth-child(12):hover,
button:nth-child(16):hover,
button:nth-child(20):hover {
    background: #ff7043; /* Lighter accent on hover */
}

/* Equal button styling */
button:nth-child(20) {
    background: #388e3c; /* Green for equals */
}

button:nth-child(20):hover {
    background: #4caf50; /* Lighter green on hover */
}