@layer lookandfeel {
	html {
		background: var(--color-background);
		color: var(--color-base);
		font-family: var(--font-family-base);
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		scroll-behavior: smooth;
	}

	h1, h2, h3, h4, h5 {
		font-family: var(--font-family-head);
		margin: 1em 0 1em;
		padding: 0;
		text-wrap: balance;
	}

	h1, h2 {
		margin-top: 0;
		& span {
			font-size: 0.75em;
		}
	}

	h1 {
		& a {
			color: var(--color-base);
			text-decoration: none;

			&:visited {
				color: inherit;
			}

			&:hover,
			&:focus,
			&:active {
				text-decoration: underline;
				color: var(--color-base);
			}
		}
	}

	p {
		margin: 1em 0;
		font-size: 1.1rem;
		line-height: 1.7rem;
	}

	ul {
		margin: 1rem 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 1rem;

		& > li > ul {
			margin-left: 2rem;
		}
	}

	ul.list {
		display: block;
		margin-left: 2rem;

		& li {
			display: list-item;
			list-style: circle;

			& ul {
				display: block;
				margin-left: 1rem;

				& li {
					list-style: square;
					margin-bottom: .75em;
				}
			}

			/* Any link should break lines */
			& a {
				word-break: break-word;
				hyphens: auto;
				hyphenate-character: "↵";
			}
		}
	}

	blockquote {
		max-width: 100%;
		word-break: break-all;
	}

	ul.list {
		margin-left: 2rem;
		& li {
			margin-bottom: 0.5rem;
			list-style: disc;
		}
	}

	.logo {
		& > h1 {
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: center;
			line-height: 1;
			max-width: 12ch;

			& > span {
				position: relative;
				padding-right: 2rem;
			}
			& > span:after {
				content: "";
				position: absolute;
				width: 1rem;
				height: 1rem;
				background: var(--color-primary);
				right: 0px;
				top: .25rem;
			}
		}
	}

	.summary {
		padding-inline: 2rem;
		position: relative;

		&:after {
			content: "";
			width: 4rem;
			height: 2px;
			background: var(--color-primary);
			position: absolute;
			bottom: 0;
			right: 2rem;
		}

		&:before {
			content: "";
			width: 2px;
			height: 4rem;
			background: var(--color-primary);
			position: absolute;
			bottom: 0;
			right: 2rem;
		}

		& h3 {
			&::after {
				content: "";
				position: absolute;
				width:4rem;
				height: 2px;
				background: var(--color-primary);
				top: -2rem;
				left: 0.5rem;
			}

			&:before {
				content: "";
				width: 2px;
				height: 4rem;
				background: var(--color-primary);
				position: absolute;
				top: -2rem;
				left: 0.5rem;
			}
		}
	}
}