body {
	color: black;
	background-color: white;
	font-family: monospace;
}

.main-container {
	max-width: 62ch;
	margin: 0 auto;
	padding: 1em 1ch;
}

.video-embed {
	position:relative;
	padding: 56.25% 0 0 0;

	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.contact .name {
	font-weight: bold;
}

.footer {
	font-size: smaller;
	margin: 3em 0 1em 0;
}


/*
 * Calendar
 */

.month-container {
	color: #235787;
	background-color: white;
	text-align: left;
	margin-bottom: 5em;


	.days {
		/*
		 * In list/portrait mode, hide the padding
		 * at the start of the list. See below for
		 * why grid/landscape mode needs it.
		 */
		.padding {
			display: none;
		}

	}

	@media (min-width: 75ch) {
		/*
		 * In grid/landscape view, for the sake of
		 * mobile devices, reduce the width a bit.
		 */
		/* font-size: small; */

		.days {
			/*
			 * Show the padding at the start of
			 * the month, so that Sunday is the
			 * first column of the grid.
			 */
			.padding {
				display: block;
			}

			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-auto-flow:	row;
			gap: 0.5ch;
		}
	}

	.day {
		background-color: #ebf5fb;
		padding-bottom: 1px;

		.dateday-container {
			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			border-bottom: solid white 0.50ch;
			font-weight: bold;
		}

		.date {
			flex-grow: 0;
			text-align: right;
			width: auto;
			width: 2ch;
			padding: 0.5ch 1ch;
			border-right: solid white 0.25ch;
			margin: 0;
			color: white;
			/* background-color set by fasting class */
		}

		.weekday {
			flex-grow: 1;
			padding: 0.5ch 1ch;
			margin: 0;
			text-align: left;
			color: white;
			background-color: #235787;
		}

		.event {
			margin: 1em;
		}

		.event-title {
			font-weight: bold;
		}
	}

}

table#fasting-legend {
	margin-top: 3em;
	margin-bottom: 3em;

	tr {
		height: 2em;
	}

	td {
		padding: 0;
		vertical-align: middle;
	}

	td.key {
		width: 1em;
		border: solid 0.1em #235787;
	}

	td.value {
		padding-left: 1ch;
	}
}


/*
 * Livestream Schedule
 */

.live-schedule {
        max-width: 75ch;

        .stream-day {
                text-align: center;
                color: #235787;
                background-color: #ebf5fb;
                padding-bottom: 1px;
                width: 100%;
                border-bottom: solid white 0.50ch; 

                .stream-weekday {
                        padding: 0.5ch;
                        margin: 2rem 0px 1rem;
                        font-size: large;
                        font-weight: bold;
                        color: white;
                        background-color: #235787;
                }

                .stream-feast {
                        font-weight: bold;
                        margin-bottom: 1rem;
                }

                .stream-title {
                        font-weight: bold;
                }

                .stream-time {
                        margin-bottom: 1rem;
                }
        }
}