Add styles for buttons

Author: tajulafreen

Source-Code/Calculator/style.css

@@ -0,0 +1,82 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background:  #f9f6ee;
+    font-family: 'Roboto', sans-serif;
+}
+
+.calculator {
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.calculator-screen {
+    width: 100%;
+    height: 100px;
+    border: none;
+    background-color: #252525;
+    color: white;
+    text-align: right;
+    padding: 10px 20px;
+    font-size: 2.5rem;
+}
+
+.calculator-keys {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    padding: 20px;
+    background-color: #f1f3f6;
+}
+
+button {
+    height: 60px;
+    border-radius: 5px;
+    border: none;
+    font-size: 1.5rem;
+    color: white;
+    background-color: #333;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+button:hover {
+    background-color: #555;
+}
+
+.operator {
+    background-color: #f39c12;
+}
+
+.operator:hover {
+    background-color: #d87a0d;
+}
+
+.equal-sign {
+    height: calc(80px + 10px);
+    grid-column: span 4;
+    font-size: 30px;
+}
+
+.all-clear {
+    background-color: #e74c3c;
+}
+
+.all-clear:hover {
+    background-color: #c0392b;
+}
+
+.decimal {
+    background-color: #9b59b6;
+}
+
+.decimal:hover {
+    background-color: #8e44ad;
+}