// This stylesheet is only concerned with the styling of the markdown content in the blog posts.

#blog-content {
	h1 {
		font-size: 2.25rem;
		font-weight: 700;
		line-height: 1.75em;
		margin-bottom: 1rem;
		color: var(--headerColor);
	}

	h2 {
		font-size: (28/16rem);
		font-weight: 700;
		line-height: 1.5em;
		margin-bottom: (16/16rem);
		color: var(--headerColor);
		&[id] {
			scroll-margin-top: 8rem; /* adds margin top when scrolling down to a h2 header using a TOC link */
		}
	}

	h3 {
		font-size: (24/16rem);
		font-weight: 700;
		line-height: 1.5em;
		margin-bottom: (16/16rem);
		color: var(--headerColor);
	}

	h4,
	h5,
	h6 {
		font-size: (20/16rem);
		font-weight: 700;
		line-height: 1.5em;
		margin-bottom: (16/16rem);
		color: var(--headerColor);
	}

	p {
		font-size: (16/16rem);
		line-height: 1.6em;
		margin: 0;
		margin-bottom: (16/16rem);
		color: var(--bodyTextColor);
	}

	a {
		font-size: inherit;
		text-decoration: underline;
		color: var(--secondary);
	}

	ul,
	ol {
		margin: 0;
		margin: (16/16rem) 0;
		padding-left: (40/16rem);

		li {
			font-size: (16/16rem);
			line-height: 1.6em;
			list-style: circle;
			margin-bottom: (16/16rem);
			color: var(--bodyTextColor);
		}
	}

	img {
		width: 100%;
		height: auto;
		margin: (16/16rem) 0;
		border-radius: (8/16rem);
		display: block;
	}

	/* code blocks */
	pre {
		padding: (16/16rem);
		margin: (16/16rem) 0;
	}
}

/* Dark Mode */
@media only screen and (min-width: 0em) {
	body.dark-mode {
		#blog-content {
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				color: #f7f7f7;
			}

			p,
			li {
				color: #f7f7f7;
				opacity: 0.8;
			}
			a {
				color: #9dafe5;
			}
		}
	}
}
