Add css

index.html

@@ -37,6 +37,7 @@
             </div>
         </div>
     </div>
+    <script src="calculator.js"></script>
     <script src="main.js"></script>
-</body>
+</body> 
 </html>

main.css

@@ -1,5 +1,55 @@
-.container {
+body {
+    background-color: #e5e5e5;
     display: flex;
     justify-content: center;
-    height: 100vh;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.calculator {
+    margin-bottom: auto;
+    background-color: #84848452;
+    border: 2px solid #4d4d4d52;
+    border-radius: 5px;
+}
+
+.screen {
+    padding: 5px;
+    text-align: right;
+    font-weight: bold;
+}
+
+.display_sml {
+    height: 50px;
+    font-size: 1.5rem;
+}
+
+.display_big {
+    min-height: 40px;
+    font-size: 1.9rem;
+    line-height: 2.25rem;
+    word-break: break-all;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat (4, 100px);
+}
+
+.buttons>button {
+    width: 100px;
+    height: 100px;
+    font-size: larger;
+    font-weight: bold;
+}
+
+.buttons>.eq {
+    grid-column-start: 3;
+    grid-column-end: 5;
+    width: 200px;
+    background-color: #94ff94;
+}
+
+.buttons>.ac {
+    background-color: #ffaabb;
 }