.calendar-container {
	display: flex;
	align-items: flex-start;
}

.month-list {
	margin-right: 20px;
}

/* .month {
	background: white;
	padding: 5px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 5px;
	cursor: pointer;
	text-align: center;
}

.month:hover {
	background-color: #1abc9c;
	color: white;
} */

.calendar {
	background: white;
	padding: 20px;
	border-radius: 8px;
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	text-align: center;
}

.weekdays, #daysContainer {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-top: 10px;
}
.weekdays {
border-bottom: solid 1px;
padding-bottom: 10px;
}
.weekday {
	font-weight: bold;
	color: #333;
}

.day, .empty {
	color: black;
	padding: 2px;
	border-radius: 4px;
}
@media (max-width: 576px) {
.day, .empty {
padding: 1px;
}
.weekdays, #daysContainer {
gap: 5px;
}
}
@media (min-width: 1200px) {
.day, .empty {
padding: 5px;
}
}
.empty {
	background-color: transparent;
	border: none;
}

.highlight {
	background-color: var(--orange);
	color: #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}