fix: styled input field in animation section

styled input field for duration present in the animation section

fix #185

Author: Coding-Hashira

index.html

@@ -322,6 +322,7 @@ <h1 id="head">Code Magic</h1>
               type="number"
               name="duration"
               id="animation-duration"
+              class="styled-input"
               min="0"
               max="120"
               step="1"

src/style.css

@@ -280,6 +280,25 @@ textarea {
   justify-content: space-between;
 }
 
+.styled-input {
+  background-color: var(--secondary-color);
+  border: 1px solid #010204;
+  border-radius: 5px;
+  caret-color: var(--primary-color);
+  color: var(--text-color);
+  padding: 4px;
+}
+
+.styled-input:focus, .styled-input:focus-visible {
+  outline:none;
+}
+
+.styled-input::-webkit-inner-spin-button,
+.styled-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .duration-label > span {
   font-size: 0.9em;
 }