CSS tweaks

app/components/Calendar.module.css

@@ -25,6 +25,7 @@
     border: 1px solid #ccc;
     border-radius: 10px;
     padding: 10px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
     &:hover {
         background-color: #7dcf8c;
@@ -65,9 +66,10 @@
     padding: 10px 20px;
     cursor: pointer;
     margin-bottom: 2rem;
-    border: 1px solid #ccc;
+    border: 2px solid #57d545;
     border-radius: 10px;
     font-size: 1.3rem;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
     &:hover {
         background-color: #7dcf8c;
@@ -99,7 +101,7 @@
     font-size: 1.3rem;
 }
 
-.latestBoxModal {
+.boxModal {
     position: fixed;
     top: 0;
     left: 0;
@@ -109,27 +111,33 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: var(--font-main);
 }
 
-.latestBoxModalContent {
+.boxModalContent {
     background-color: #fff;
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
+    margin: 1rem;
 }
 
-.latestBoxConfirmButton {
-    background-color: #86f56d;
-    border: none;
+.boxModalConfirmButton {
+    background-color: #a7ebb0;
+    border: 2px solid #57d545;
     border-radius: 10px;
     padding: 10px 20px;
     margin-right: 1rem;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+
 }
 
-.latestBoxCancelButton {
+.boxModalCancelButton {
     background-color: #f56d6d;
-    border: none;
+    border: 2px solid #f02020;
     border-radius: 10px;
     padding: 10px 20px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+
 }