.article-subtitle {
	font-size: 32px;
}

.article-subtitle-id-link {
	opacity: .3;
	margin-left: 1rem;
	text-decoration: none;
}

.article-subtitle-id-link:hover {
	opacity: .9;
}

.article-code {
	font-size: 16px;
	font-weight: 400;
    margin: 1em 0px;
}

.article-code-text {
	margin: 0;
	padding-bottom: 1em;
	overflow-x: auto;

	tab-size: 5;
}

.article-code-text::-webkit-scrollbar {
	display: none;
}

.article-code-file {
	padding: 10px;
	margin-bottom: 10px;
	background: var(--accent-color-light);
}

.article-equation {
	font-size: 28px;
	text-align: center;
}

.article-inline-equation {
	font-size: 21px;
}

.article-embed {
	border: none;

	width: 100%;
	aspect-ratio: auto 16 / 9;

	position: relative;

	margin: 0 auto;
	display: block;
}

.article-embed-half {
	width: 55%;
}

.article-embed-no-height-limit {
	aspect-ratio: unset;
}

.article-embed-thumb {
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.article-embed-thumb-yt-icon:after {
	--size_x: 68px;
	--size_y: 48px;

	content: "";
	background-image: var(--youtube-icon);

	left: 15px;
	bottom: 20px;

	z-index: 2;
	pointer-events: none;
	position: absolute;

	width: var(--size_x);
	height: var(--size_y);
}

.article-equation {
	color: var(--text-color);
}

.article-equation-inline {
	font-size: 16px;
}

.text-heavy {
	font-weight: 700;
}

@media (max-width: 1200px) {
	.article {
		padding-left: var(--pad);
	}
}

@media (max-width: 500px) {
	.math-display {
		font-size: 5vw;
	}
}

.article-comment-section {
	margin-top: 20px;
}

.comment-frame {
	overflow: hidden;
	border: none;

	/* allow for the same styling as the page headers for commenters, needs negitive space */
	width: calc(100% + 15px);
	margin-left: -15px;
}