.calendar {
    width: 1030px;
    text-align: center;
    margin: 0 auto;
}

.calendar .year-title {
    padding: 10px 32px;
    font-size: 36px;
    text-align: left;
}

.calendar .jsCalendar {
    display: inline-block;
}

.calendar .jsCalendar-previous,
.calendar .jsCalendar-next {
    opacity: 0.3;
    color: black;
}

.calendar-legend {
    margin: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
}

.box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Additional CSS for mobile responsiveness */
@media screen and (max-width: 767px) {
    .calendar {
        width: 100%; /* Adjust the width to fit the screen */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-align the calendars horizontally */
    }

    .calendar .clean-theme {
        width: 100%; /* Make each calendar take up the full width */
        margin-bottom: 20px; /* Add some space between months */
    }

    .calendar .year-title {
        text-align: center; /* Center-align the year title */
    }

    h1 {
        font-size: 1.6em;
    }
}

/* Additional CSS for tablet landscape mode */
@media screen and (min-width: 768px) and (max-width: 900px) {
    .calendar {
      display: flex;
      flex-direction: column;
      align-items: center; /* Center-align the calendars vertically */
      padding: 0 10px; /* Add padding to prevent content cut-off */
      box-sizing: content-box; /* Adjust box sizing to account for padding */
      width: 100%; /* Adjust the width to fit the screen */
      max-width: 1024px; /* Set maximum width to prevent over-expansion */
      margin: 0 auto; /* Center-align the container */
    }

    .calendar .clean-theme {
      width: calc(100% - 20px); /* Set each calendar to take full width with spacing */
      margin: 10px 0; /* Add vertical spacing between calendars */
      max-width: calc(100% - 20px); /* Set maximum width to prevent over-expansion */
    }
  }

/* Additional CSS for smaller screens (less than 376px width) */
@media screen and (max-width: 375px) {
    .calendar .clean-theme {
        width: calc(100vw - 40px); /* Set a maximum width to avoid overflow */
        margin-bottom: 20px; /* Add some space between months */
    }
}