/* General body styling for centering the calculator on the screen */
body {
    display: flex; /* Flexbox layout for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
    background-color: #f0f0f0; /* Light grey background */
    margin: 0; /* Remove default margin */
  }
  
  /* Calculator container styling */
  .calculator {
    width: 300px; /* Fixed width */
    background-color: white; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  }
  
  /* Display area styling */
  .display {
    height: 60px; /* Fixed height */
    background-color: #222; /* Dark background for display */
    color: white; /* White text color */
    text-align: right; /* Align text to the right */
    padding: 20px; /* Padding around text */
    font-size: 24px; /* Larger font size */
    box-sizing: border-box; /* Include padding in width calculation */
  }
  
  /* Button container styling */
  .buttons {
    display: grid; /* Grid layout for buttons */
    grid-template-columns: repeat(4, 1fr); /* Four columns of equal width */
    gap: 1px; /* Small gap between buttons */
    background-color: #ccc; /* Background color for button container */
  }
  
  /* Individual button styling */
  button {
    height: 60px; /* Fixed button height */
    font-size: 20px; /* Button text size */
    background-color: white; /* White button background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* No outline on focus */
    transition: background-color 0.2s; /* Smooth transition for hover effect */
  }
  
  /* Hover effect for buttons */
  button:hover {
    background-color: #ddd; /* Light grey background on hover */
  }