anto

css/style.css

@@ -33,12 +33,14 @@ footer {
   max-height: none;
   overflow-y: visible;
 }
-.sticky-header thead{
+
+.sticky-header thead {
   position: sticky;
   top: 0;
   z-index: 1;
 }
-#addVideoHandler{
+
+#addVideoHandler {
   display: flex;
 }
 
@@ -64,51 +66,87 @@ footer {
   padding: 20px;
   border-radius: 8px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  max-height: 80vh; /* Adjust the max-height as needed */
+  overflow-y: auto;
+
 }
 
 .form-content h1 {
   margin: 0;
+  margin-bottom: 20px;
 }
 
-#close-form-button {
-  margin-top: 20px;
+.form-content label {
+  margin-bottom: 10px;
 }
 
-.duration-input {
-  margin-left: 33%;
+.form-content input,
+.form-content select,
+.form-content .duration-input,
+.form-content .fraction-input {
+  margin-bottom: 20px;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+.form-content .duration-input,
+.form-content .fraction-input {
   display: flex;
   align-items: center;
 }
 
-.duration-input button {
+.form-content .duration-input {
+  margin-left: 33%;
+}
+
+.form-content .duration-input button,
+.form-content .fraction-input button {
   width: 30px;
   height: 30px;
   margin: 0 5px;
   align-items: center;
+  padding: 10px;
+  font-size: 1rem;
 }
 
-.duration-input input {
+.form-content .duration-input input {
   width: 50px;
   text-align: center;
 }
 
-#close-form-button {
+.form-content #submit,
+.form-content #close-form-button {
   margin-top: 20px;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+#number-board {
+  display: grid;
+  gap: 10px;
+  justify-content: center;
+  max-height: 40vh; /* Adjust the max-height as needed */
+  overflow-y: auto;
 }
 
 .number-button {
+  padding: 10px;
+  font-size: 1rem;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
-  padding: 10px;
-  margin: 5px;
   cursor: pointer;
+  transition: background-color 0.3s;
+  margin: 5px;
 }
 
 .number-button.highlight {
-  background-color: #ff0000;
+  background-color: red;
   color: #fff;
 }
 
-#numerator,#denominator{
+#numerator, #denominator {
   width: 25%;
-}
+}