source ⟩ hypertext ⟩ public ⟩ hymns ⟩ hymndex.css

#body-container {
	display: grid;
	grid-template-rows: 5em auto auto auto;
	grid-template-columns: 1fr;
	grid-template-areas: "header" "navbar-top" "main-body" "navbar-bottom";

	inline-size: auto;
	max-inline-size: 145ch;
}

#main-body {
	grid-area: main-body;
	position: relative;

	padding-inline: 1rem;

	font-size: clamp(1rem, 1.7vi, 1.2rem);

	background-color: var(--background);

	& > p,
	& .comment-section {
		max-inline-size: 60ch;
		margin-inline: auto;
	}

	& p {
		text-align: justify;
	}

	& h2 {
		text-align: center;
	}
}

ul.hymn-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em;

	padding: 0;

	& li {
		display: block;

		min-inline-size: 7.5rem;
		margin: 0;

		text-align: center;

		font-size: 0.85em;

		& a {
			text-decoration: none;

			& img {
				inline-size: 7.5rem;
				margin-block: 0;
				margin-inline: auto;

				border: 3px double var(--accent);
			}

			& figcaption {
				font-variant-caps: small-caps;
				letter-spacing: var(--caps-spacing);

				& small {
					display: block;
				}
			}
		}
	}
}

@media screen and (max-width: 1299px) {
	#body-container {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 1099px) {
	#body-container {
		grid-template-columns: 1fr;
		grid-template-areas: "header" "navbar-top" "main-body" "navbar-bottom";
	}
}

@media screen and (max-width: 1049px) {
	#settings {
		position: relative;
		display: flex;
		align-items: center;
		gap: 1em;

		& button {
			opacity: 0.6;
		}
	}
}

@media screen and (max-width: 799px) {
	#body-container {
		grid-template-rows: 5em auto auto auto;
		grid-template-columns: 1fr;
		grid-template-areas: "header" "navbar-top" "main-body" "navbar-bottom";
	}
}

@media screen and (max-width: 499px) {
	#body-container {
		grid-template-rows: 5em auto auto auto;
	}
}


@font-face {
	font-family: "Alegreya";
	font-weight: bold;
	font-style: italic;
	src: url("/fonts/Alegreya-BoldItalic.woff2");
}