diff --git a/epicyon-calendar.css b/epicyon-calendar.css
index 8db0a6b54..fa3edea70 100644
--- a/epicyon-calendar.css
+++ b/epicyon-calendar.css
@@ -17,7 +17,8 @@
     --calendar-horizontal-padding: 0;
     --font-size-calendar-header: 3rem;
     --font-size-calendar-day: 1rem;
-    --font-size-calendar-cell: 4rem;
+    --font-size-calendar-cell: 2rem;
+    --font-size-calendar-cell-mobile: 4rem;
 }
 
 @font-face {
@@ -55,12 +56,6 @@ main {
     flex-basis: 980px;
 }
 
-.calendar {
-    table-display: fixed;
-    width: 100%;
-    padding: 0 var(--calendar-horizontal-padding);
-}
-
 a:visited{
     color: var(--day-number);
     text-decoration: none;
@@ -123,11 +118,6 @@ a:focus {
     text-transform: uppercase;
 }
 
-.calendar__day__cell {
-    font-size: var(--font-size-calendar-cell);
-    position: relative;
-}
-
 .year {
     font-size: 30px;
 }
@@ -210,3 +200,29 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
     -ms-transform: translateY(30%) scaleX(-1);
     transform: translateY(30%) scaleX(-1);
 }
+
+@media screen and (min-width: 400px) {
+    .calendar {
+        table-display: fixed;
+        margin: 0 20%;
+        width: 60%;
+        padding: 0 var(--calendar-horizontal-padding);
+    }
+    .calendar__day__cell {
+        font-size: var(--font-size-calendar-cell);
+        position: relative;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .calendar {
+        table-display: fixed;
+        margin: 0 0;
+        width: 100%;
+        padding: 0 var(--calendar-horizontal-padding);
+    }
+    .calendar__day__cell {
+        font-size: var(--font-size-calendar-cell-mobile);
+        position: relative;
+    }
+}