Add styles

style.css

@@ -1,16 +1,44 @@
 
+@font-face {
+    font-family: "Sixteen Segments";
+    src: url("./fonts/SixteenSegments.woff2") format("woff2"),
+         url("./fonts/SixteenSegments.woff") format("woff"),
+         url("./fonts/SixteenSegments.ttf") format("truetype")
+}
+
+html {
+    --digi-green: #79ff54;
+    --dark-green: #094909;
+    --light-text: #eee;
+    --dark-text: #111;
+    --dark-trans: rgba(17, 17, 17, 0.9);
+}
+
 body {
+    background-image: url("./matrix-356024.jpg");
+    background-size: cover;
+    font-family: "Fira Sans", sans-serif;
     display: flex;
     text-align: center;
     flex-direction: column;
     height: 100vh;
     margin: 0;
-    background-color: #094909;
-    color: #eee;
+    background-color: var(--dark-green);
+    color: var(--light-text);
+    overflow: hidden;
 }
 
 header {
     flex: 0 0 auto;
+    padding: 15px 0;
+    background-color: var(--dark-trans);
+}
+
+header h1 {
+    font-size: 70px;
+    letter-spacing: 5px;
+    margin: 0;
+    color: var(--light-text);
 }
 
 main {
@@ -19,6 +47,7 @@ main {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 0;
 }
 
 .calculator {
@@ -26,7 +55,7 @@ main {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
     grid-gap: 5px;
-    background: #594859;
+    background-color: #594859;
     padding: 10px;
     box-shadow: 1px 2px 10px 1px #222;
     border: 5px solid;
@@ -36,11 +65,13 @@ main {
 
 .display {
     grid-column: 1 / span 4;
-    height: 100px;
+    height: 150px;
     max-width: 415px;
+    padding: 5px;
     overflow: hidden;
-    background: #333;
+    background-color: #333;
     color: #1bff07;
+    font-family: "Sixteen Segments", monospace;
     text-align: right;
     border: 1px solid #222;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); 
@@ -49,20 +80,26 @@ main {
 }
 .top-screen {
     height: 40%;
-    font-size: 20px;
+    font-size: 30px;
+    max-width: 415px;
+    overflow: hidden;
 }
 .main-screen {
     height: 60%;
-    font-size: 50px;
+    font-size: 70px;
+    max-width: 415px;
+    overflow: hidden;
 }
 
 button {
+    font-family: "Fira Sans", sans-serif;
     height: 100px;
     width: 100px;
     font-size: 50px;
-    border-color: #eee;
+    border-color: var(--light-text);
     border-radius: 5px;
     box-shadow: 1px 2px 10px 1px #222;
+    color: var(--dark-text);
     cursor: pointer;
 }
 
@@ -85,8 +122,9 @@ button:active, .active {
 
     width: 120px;
     font-size: 20px;
-    background: #094909;
-    color: #eee;
+    background-color: var(--dark-green);
+    border: 1px solid var(--digi-green);
+    color: var(--light-text);
     opacity: 0;
     transition: opacity 0.7s;
     padding: 5px;
@@ -102,7 +140,7 @@ button:active, .active {
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: #094909 transparent transparent transparent;
+    border-color: var(--digi-green) transparent transparent transparent;
   }
 
 .tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext {
@@ -111,23 +149,35 @@ button:active, .active {
 }
 
 .num, .plus-minus {
-    background: #d9e1f2;
+    background-color: #d9e1f2;
 }
 
 .clear {
-    background: #f98383;
+    background-color: #f98383;
 }
 
 .operator {
-    background: #ffff69;
+    background-color: #ffff69;
 }
 
 .equal {
     grid-column: span 2;
     width: 205px;
-    background: #79ff54;
+    background-color: var(--digi-green);
 }
 
 footer {
     flex: 0 0 auto;
+    padding: 10px;
+    background-color: var(--dark-trans);
+    letter-spacing: 2px;
+}
+
+footer a {
+    color: var(--digi-green);
+}
+
+footer a:hover, footer a:focus {
+    color: rgb(170, 255, 0);
+    text-decoration: none;
 }