Update style.css

Calculators/Percentage-Calculator/style.css

@@ -1,76 +1,125 @@
 body {
-    font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    background-color: #f5f5f5;
-    display: flex;
-    flex-direction: column;
+  font-family: "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  background: rgb(253, 191, 232);
+  background: linear-gradient(
+    329deg,
+    rgba(253, 191, 232, 1) 0%,
+    rgba(51, 57, 125, 1) 21%,
+    rgba(149, 219, 233, 1) 100%
+  );
 }
 
 .calculator-container {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    text-align: center;
-    margin-top: 30px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  margin-top: 30px;
+  font-family: "Roboto Mono", "monospace";
+}
+.calculator-container:hover {
+  transform: scale(1.1);
 }
-
 .input-container {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+  font-family: "Roboto Mono", "monospace";
+
 }
 
 label {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 input {
-    padding: 8px;
-    width: 100%;
-    box-sizing: border-box;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }
 
 button {
-    background-color: #4caf50;
-    color: #fff;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
+  background-color: #4caf50;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.35s ease-Out;
 }
 
 button:hover {
-    background-color: #45a049;
+  background-color: #055ea3;
 }
 
+button:hover #slide {
+  width: 100%;
+  height: 100%;
+  left: -200px;
+  background: #acc9c9;
+  position: absolute;
+  transition: all 0.35s ease-Out;
+  bottom: 0;
+  left: 0;
+}
 .result {
-    margin-top: 20px;
-    font-size: 18px;
-    font-weight: bold;
+  margin-top: 20px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: "Roboto Mono", "monospace";
 }
 /* Add styles for the new select element */
 .options-container {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+  font-family: "Roboto Mono", "monospace";
 }
 
 select {
-    padding: 8px;
-    width: 100%;
-    box-sizing: border-box;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: "Roboto Mono", "monospace";
+  border-radius: 8px;
 }
 
 /* Add styling for the reset button */
 button.reset {
-    background-color: #f44336;
+  background-color: #f44336;
 }
 
 button.reset:hover {
-    background-color: #d32f2f;
+  background-color: #d32f2f;
+}
+@font-face {
+  src: url("https://fonts.googleapis.com/css?family=Roboto+Mono:100");
+  font-family: "Roboto Mono", monospace;
+  background: #212121;
+  height: 100%;
+}
+.header {
+  height: 100%;
+  width: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-family: "Roboto Mono", monospace;
+  font-weight: 100%;
+  font-size: 24px;
+  color: rgb(6, 0, 4);
+  transition: all 0.5s ease-Out;
 }
-