anto

css/style.css

@@ -6,6 +6,10 @@ footer {
   text-align: center;
   position: fixed;
   bottom: 0;
+  width: 100%;
+  background-color: #f8f9fa;
+  padding: 10px;
+  border-top: 1px solid #e7e7e7;
 }
 
 .row {
@@ -38,14 +42,16 @@ footer {
   position: sticky;
   top: 0;
   z-index: 1;
+  background-color: #fff;
 }
 
 #addVideoHandler {
   display: flex;
+  align-items: center;
 }
 
 #show-form-button {
-  left: 20px;
+  margin-left: 20px;
 }
 
 .form-container {
@@ -63,24 +69,29 @@ footer {
 
 .form-content {
   background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
+  padding: 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: left;
   display: flex;
   flex-direction: column;
-  width: 50%;
-  max-height: 80vh; /* Adjust the max-height as needed */
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh; /* Adjust the max-height as needed */
   overflow-y: auto;
-
 }
 
 .form-content h1 {
   margin: 0;
   margin-bottom: 20px;
+  font-size: 1.5rem;
+  color: #333;
 }
 
 .form-content label {
   margin-bottom: 10px;
+  font-weight: bold;
+  color: #555;
 }
 
 .form-content input,
@@ -88,40 +99,59 @@ footer {
 .form-content .duration-input,
 .form-content .fraction-input {
   margin-bottom: 20px;
-  padding: 10px;
+  padding: 12px;
   font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .form-content .duration-input,
 .form-content .fraction-input {
   display: flex;
   align-items: center;
-}
-
-.form-content .duration-input {
-  margin-left: 33%;
+  justify-content: center;
 }
 
 .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;
+  width: 40px;
+  height: 40px;
+  margin: 0 10px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.form-content .duration-input button:hover,
+.form-content .fraction-input button:hover {
+  background-color: #0056b3;
 }
 
 .form-content .duration-input input {
-  width: 50px;
+  width: 60px;
   text-align: center;
 }
 
-.form-content #submit,
-.form-content #close-form-button {
+.form-content #submit {
   margin-top: 20px;
-  padding: 10px;
+  padding: 12px;
   font-size: 1rem;
+  width: 100%;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.form-content #submit:hover{
+  background-color: #0056b3;
 }
 
 #number-board {
@@ -140,6 +170,7 @@ footer {
   cursor: pointer;
   transition: background-color 0.3s;
   margin: 5px;
+  border-radius: 4px;
 }
 
 .number-button.highlight {
@@ -148,5 +179,29 @@ footer {
 }
 
 #numerator, #denominator {
-  width: 25%;
+  width: 30%;
+  text-align: center;
 }
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background-color: red;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 30;
+}
+
+.close-button:hover {
+  background-color: darkred;
+}
+