diff --git a/src/DateCalendar.html b/src/DateCalendar.html
index 16a9d0b..c6cb679 100644
--- a/src/DateCalendar.html
+++ b/src/DateCalendar.html
@@ -117,7 +117,7 @@
 
 <style>
   .date-calendar {
-    width: calc(var(--calendar-cell-size) * 7);
+    width: calc(var(--date-calendar-cell-size) * 7);
   }
 
   .date-calendar-table {
@@ -128,14 +128,14 @@
 
   .date-calendar-cell {
     padding: 0;
-    height: var(--calendar-cell-size);
-    width: var(--calendar-cell-size);
+    height: var(--date-calendar-cell-size);
+    width: var(--date-calendar-cell-size);
     text-align: center;
     vertical-align: middle;
   }
 
   .date-calendar-cell.heading {
-    height: calc(var(--calendar-cell-size) * 0.6);
+    height: calc(var(--date-calendar-cell-size) * 0.6);
     font-weight: bold;
     font-size: 0.8em;
   }
diff --git a/style-vars.json b/style-vars.json
index 19387a8..a2d0e2b 100644
--- a/style-vars.json
+++ b/style-vars.json
@@ -1,9 +1,10 @@
 {
-  "calendar-cell-size": "50px",
   "calendar-color-hovered": "#ccc",
   "calendar-text-color-hovered": "inherit",
   "calendar-color-highlighted": "var(--calendar-color-hovered)",
   "calendar-text-color-highlighted": "var(--calendar-text-color-hovred)",
   "calendar-color-selected": "#888",
-  "calendar-text-color-selected": "#fff"
+  "calendar-text-color-selected": "#fff",
+  "date-calendar-cell-size": "50px",
+  "month-calendar-cell-size": "87.5px"
 }
\ No newline at end of file