<style>

.calendar-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 10px;
}

.calendar-header, .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Exactly 7 equal columns */
}

.calendar-header {
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
}

.calendar-grid {
  flex: 1; /* Forces the dates to fill the remaining screen height */
  grid-auto-rows: 1fr; /* Ensures all rows are equal in height */
  gap: 2px;
}

.day {
/*   background-color: #f9f9f9;  */
  border: 1px solid #ddd;
  padding: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}


</style>
