.calendar {
	-webkit-user-select: none;
	user-select: none;
	--cborder: #b1998b;
	width: 100%;
	background: rgb(245, 245, 245);
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em;
	border-bottom: 1px solid var(--cborder);
	background-image: url('/images/bgs/yellowdiagonal.gif');
}

.calendar-header button {
	visibility: hidden;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cborder);
}

.calendar-header button:hover {
	color: var(--border);
}

.month-year {
	font-weight: 600;
	color: var(--border);
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
}

.day-name {
	font-weight: bold;
	color: var(--border);
	background: #dfebbf;
	border-right: 1px solid var(--cborder);
	border-bottom: 1px solid var(--cborder);
	padding: 0.25em;
}

.day {
	background: white;
	color: var(--cborder);
	border-right: 1px solid var(--cborder);
	border-bottom: 1px solid var(--cborder);
	padding: 0.25em;
}

.today {
	background: #aae0d8;
	color: white;
	font-weight: bold;
}