html {
	scroll-behavior: smooth;
}
:root {
	--encoderStroke: hsla(194, 91%, 45%, 1);
	--decoderStroke: hsla(29, 100%, 55%, 1);
	--encoderFill: hsla(194, 81%, 62%, 0.851);
	--decoderFill: hsla(29, 95%, 64%, 0.702);
	--latentFill: hsla(122, 51%, 70%, 1);
}

.decoderStroke {
	color: var(--decoderStroke);
}
.decoderFill {
	color: var(--decoderFill);
}
.encoderFill {
	color: var(--encoderFill);
}
.encoderStroke {
	color: var(--encoderStroke);
}
.latentColor {
	color: var(--latentFill);
}

/* ALL CSS BELOW IS CUT DOWN AND MODIFIED FROM HOHMAN ET AL. https://distill.pub/2020/communicating-with-interactive-articles/  */
.under-line {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding-bottom: 1rem;
}

.under-line.encoder {
	border-bottom-color: var(--encoderFill);
}

.under-line.latent {
	border-bottom-color: var(--latentFill);
}
.under-line.decoder {
	border-bottom-color: var(--decoderFill);
}
d-figure.base-grid {
	grid-column: screen;
	background: hsl(0, 0%, 97%);
	padding: 20px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
d-figure {
	margin-bottom: 1em;
	position: relative;
}
d-figure > figure {
	margin-top: 0;
	margin-bottom: 0;
}
a.figure-number::before,
a.figure-number-text::before {
	content: "Figure ";
}
a.figure-number {
	border-bottom-color: hsla(206, 90%, 20%, 0.3);
	text-transform: uppercase;
	font-size: 0.85em;
	color: hsla(206, 90%, 20%, 0.7);
}
a.figure-number:hover {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: hsla(206, 90%, 20%, 0.7);
}
a.figure-number-text {
	border-bottom-color: hsla(206, 90%, 20%, 0.3);
	color: hsla(206, 90%, 20%, 0.7);
}
a.figure-number-text:hover {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: hsla(206, 90%, 20%, 0.7);
}
.hidden-citations {
	display: none;
}
code {
	font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
	font-style: normal;
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 85%;
	background-color: rgba(27, 31, 35, 0.05);
	border-radius: 3px;
}