@import url("./base.css");

#root {
	max-width: 72ch;
	margin: 1em auto;
	padding-inline: 4ch;
}

.heading-container {
	margin-block: 5em;
	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;

	a {
		text-decoration: none;
		color: inherit;
	}

	.heading {
		font-family: "Fredericka the Great", serif;
		font-weight: 400;
		line-height: 1.5;

		color: var(--heading-text-color);

		text-decoration: underline;
		text-underline-offset: 0.5em;
		transition-duration: 200ms;

		&:hover {
			color: #003153;
			text-underline-offset: 0.25em;
		}
	}
}

.article {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: "Fredericka the Great", serif;
		font-weight: 400;
		margin-block: 0.5em;

		color: var(--heading-text-color);
	}

	p {
		margin-block: 1em;
		line-height: 1.5;
	}

	i,
	em,
	a {
		font-family: "Sacramento", cursive;
		font-size: 120%;
	}

	a {
		color: #668397;
		transition-duration: 150ms;

		text-decoration-line: underline;
		text-decoration-style: wavy;
		text-decoration-skip: objects;
		text-decoration-skip-ink: all;
		text-underline-offset: 50%;

		&:hover {
			color: #003153;
			text-underline-offset: 25%;
		}

		&:visited {
			color: #003153;
		}
	}

	blockquote {
		border-left: 4px solid #003153;
		background-color: color-mix(in srgb, #003153 5%, transparent);
		padding-left: 4ch;
		padding-block: 0.25em;
		font-style: italic;
	}

	li {
		margin-left: 2ch;
		margin-block: 0.5em;
	}

	img {
		width: 100%;
		object-fit: cover;
		border: 4px solid #003153;
		padding: 4px;
	}
}