#calendar-wrapper {
	display: flex;
	flex-flow: column;
	gap: 1em;
	align-items: center;
	justify-content: center;
}

.calendar {
	border: 4px solid var(--pink);
	border-radius: 32px;
	box-shadow: -8px 8px var(--pink);

	background-color: var(--yellow);
}

.calendar p {
	padding-inline: 1em;
	max-width: 100%;
	font-size: 0.8em;
	color: var(--dark);
}

.calendar p a:hover {
	font-style: italic;
}

.calendar table {
	margin: 0;
	width: 100%;
	max-width: 800px;
	border-spacing: 0;
	border: 0;
	table-layout: fixed;
}

.calendar-title {
	color: var(--pink);

	width: 100%;
	padding: 1em;
	margin: 0;
}

.calendar-days {
	background: var(--light);
	color: var(--dark);
}

.calendar-weekdays {
	background: var(--pink);
}

.calendar-weekdays > tr > th {
	padding: 4px;
}

.calendar > p {
	position: sticky;
	left: 0.25em;
}

.calendar td {
	font-size: 0.75em;
	width: calc(100% / 7);
	height: 4rem;
	aspect-ratio: 1 / 1;
	border-bottom: 1px dotted var(--yellow);
	border-right: 1px dotted var(--yellow);
	padding-inline: 4px;
	text-align: left;
	vertical-align: top;
}

.day-inactive {
	background-color: #f5e2c0;
	color: grey;
}

.day-active {
}

.day-active:nth-child(1),
.day-active:nth-child(2), 
.day-active:nth-child(3),
.day-active:nth-child(4) {
	background-color: #dedeb9;
	border-bottom: 1px dotted #bdcb99;
	border-right: 1px dotted #bdcb99;
}
/*
.day-active:nth-child(5) {
	background-color: #ffc7b3;
	border-bottom: 1px dotted #ff8d7d;
	border-right: 1px dotted #ff8d7d;
}
*/

.day-current, .day-current a {
	background: var(--pink) !important;
	color: var(--light);
}

.calendar-link {
	display: block;
	font-size: 0.7em;
	word-break: break-word;
}

@media screen and (max-width: 800px) {


	.calendar {
		max-width: 100%;
	}

	.calendar-title {
		position: sticky;
		left: 0.25em;
	}

	.table-wrapper {
		overflow-x: scroll;
	}

	.calendar table {
		min-width: 560px;
	}

	.calendar-weekdays {
		font-size: 0.75em;
	}

	.calendar-days {
		font-family: sans-serif;
	}
}