article blockquote {
	--blockquote-border-color: var(--palette-blue);
	--blockquote-nested-border-color: var(--palette-orange);
	--blockquote-warning-border-color: var(--palette-yellow);
	--blockquote-success-border-color: var(--palette-green);
	--blockquote-danger-border-color: var(--palette-red);
	color: var(--color-text-primary);
	font-style: italic;
	font-family: var(--font-family-heading);
	background: var(--color-surface-subtle);
	border-left: var(--border-width-accent) solid var(--blockquote-border-color);
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-right: 0.7em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

article blockquote blockquote {
	border-left: var(--border-width-accent) solid var(--blockquote-nested-border-color);
}

article blockquote.warn {
	border-left: var(--border-width-accent) solid var(--blockquote-warning-border-color);
}

article blockquote.success {
	border-left: var(--border-width-accent) solid var(--blockquote-success-border-color);
}

article blockquote.danger {
	border-left: var(--border-width-accent) solid var(--blockquote-danger-border-color);
}

article blockquote.haskie {
	--dog-speech-bubble-color: var(--color-palette-blue-surface);
	background: none;
	padding: var(--space-4) 0 var(--space-4) 0;
	border: none;
	margin: 0 0 0 0;
	display: flex;
	align-items: center;
}

article blockquote.haskie img {
	width: 100px;
	margin: 0 var(--space-4) 0 0;
}

article blockquote.haskie p {
	background-color: var(--dog-speech-bubble-color);
	padding: var(--space-4);
	border-radius: var(--radius-large);
	position: relative;
}

article blockquote.haskie p::after {
	content: "";
	border: 20px solid transparent;
	position: absolute;
	border-right-color: var(--dog-speech-bubble-color);
	border-left: 0;
	left: -20px;
	top: 50%;
	margin-top: -20px;
}

article blockquote.haskie.warn p {
	background-color: var(--blockquote-warning-border-color);
}

article blockquote.haskie.warn p::after {
	border-right-color: var(--blockquote-warning-border-color);
}

.footnote-definition {
	--color-text-footnote: var(--color-text-secondary);
	--color-text-footnote-code: var(--color-palette-blue-foreground);
	display: inline;
	float: right;
	position: relative;
	width: 17vw;
	margin-right: -21vw;
	font-size: 80%;
	color: var(--color-text-footnote);
}

.footnote-definition code {
	color: var(--color-text-footnote-code);
}

.footnote-definition sup {
	display: inline;
}

.footnote-definition p {
	display: inline;
}

@media (max-width: 1300px) {
	.footnote-definition {
		display: block;
		float: none;
		margin: 2% 7% 2% 7%;
		width: 80%;
		font-size: var(--font-size-small);
	}
}