* {    
  box-sizing: border-box;    
  margin: 0; 
  padding: 0;
}  

body {
  background-color: #d3d3d3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  border-radius: 15px;
}

.calculator{     
  background-color: #d3d3d3;     
  padding: 20px;     
  max-width: 400px;     
  margin: 0 auto;     
  border: solid 1px #ccc;     
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);     
  border-radius: 10px;     
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

/* For Electron, make it full screen with border radius */
body.electron .calculator {
  width: 100%;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 15px;
  border: none;
  border-radius: 15px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  background-color: #d3d3d3;
}

#result{     
  width: 100%;     
  height: 60px;     
  padding: 10px;     
  font-size: 24px;     
  border: none;     
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;     
  border-radius: 10px;
  text-align: right;
  background-color: white;
  margin-bottom: 15px;
}  

.buttons{     
  display: grid;     
  grid-template-columns: repeat(4, 1fr);     
  grid-gap: 10px;     
  flex: 1;
} 

button {
  padding: 10px; 
  font-size: 24px; 
  border: none; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  border-radius: 10px; 
  cursor: pointer; 
  transition: background-color 0.3s ease;
  min-height: 50px;
}  

button:hover{     
  opacity: 0.9;
}  

.clear{     
  background-color: rgb(245, 105, 105);     
  color: #fff; 
}  

.number, .decimal{     
  background-color: #fff;     
  color: #333; 
}  

.operator{     
  background-color: #0074d9;     
  color: #fff; 
}  

.equals{     
  background-color: #11c961;     
  grid-row: span 2;     
  color: #000000; 
}  

.zero{     
  grid-column: span 2; 
}

.backspace {
  background-color: #ff9500;
  color: #fff;
}

#result{     
  width: 100%;     
  height: 60px;     
  padding: 10px;     
  font-size: 24px;     
  border: none;     
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;     
  border-radius: 10px;
  text-align: right;
}  

.buttons{     
  display: grid;     
  grid-template-columns: repeat(4, 1fr);     
  grid-gap: 10px;     
  margin-top: 20px;
  flex: 1; /* Take remaining space */
} 

button {
  padding: 10px; 
  font-size: 24px; 
  border: none; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  border-radius: 10px; 
  cursor: pointer; 
  transition: background-color 0.3s ease;
  min-height: 50px; /* Ensure consistent button height */
}  

button:hover{     
  background-color: #ddd; 
}  

.clear{     
  background-color: rgb(245, 105, 105);     
  color: #fff; 
}  

.clear:hover {
  background-color: rgb(220, 85, 85);
}

.number, .decimal{     
  background-color: #fff;     
  color: #333; 
}  

.operator{     
  background-color: #0074d9;     
  color: #fff; 
}  

.operator:hover {
  background-color: #0056a3;
}

.equals{     
  background-color: #11c961;     
  grid-row: span 2;     
  color: #000000; 
}  

.equals:hover {
  background-color: #0ea851;
}

.zero{     
  grid-column: span 2; 
}

.backspace {
  background-color: #ff9500;
  color: #fff;
}

.backspace:hover {
  background-color: #cc7600;
}