code, pre
	font-family var(--msff)

ul, ol { padding-left: 2em }

// hide main content until js runs
// a noscript tag contains a stylesheet that counters this
body.nojs > main, body.nojs > footer
	visibility hidden

a
	cursor pointer
	text-decoration-skip-ink auto
	color var(--link-fg)
	&:visited { color: var(--link-visited-fg) }

main a > svg
	margin-right: 0.5em

button.copy-code-button
	color var(--link-fg)
	text-decoration underline
	z-index 10
	position relative
	align-self flex-start
	position absolute
	right 0
	opacity 0.75

	&:hover
		opacity 1.0

@media (max-width: 600px)
	pre.chroma:hover > button.copy-code-button
		opacity 0.9

img, embed, frame, iframe { max-width: 100vw }

details > summary
	cursor pointer
	list-style none

details > summary::-webkit-details-marker
	display none

details > summary::after
	position absolute
	top 0
	right 0
	align-self center
	content "+"

details[open] > summary::after
	content "-"

details
	position relative
	padding-left 0.5em
	border-left solid var(--syntax-bpx) var(--syntax-ledg)

html,body
	min-height 100vh
	background-color var(--bg)
	color var(--fg)
	font-family var(--ff)
	font-weight 400
	font-size 1rem
	
	&> footer
		padding 0.5em
		padding-top 5em
		padding-bottom 5em

	&> main
		padding 0.5em
		line-height 1.6em

	main:first-child, footer:first-child { margin-top: 0 }

	&> main, > footer
		.highlight
			position relative
			background-color var(--syntax-bg)
			max-width 100vw
			border-left solid var(--syntax-bpx) var(--syntax-ledg)
			display flex

		li
			margin-top 0.5em
			margin-bottom 0.5em

		.highlight, form, > ul, > ol, p
			margin-top 1em
			margin-bottom 0.25em

		h1, h2, h3, h4, h5, h6, details
			margin-top 2em
			margin-bottom 0.25em

		h1, h2, h3, h4, h5, h6, form, ul, ol, p
			max-width 60ch

		> h1 + p, > h2 + p, > h3 + p, > h4 + p, > h5 + p, > h6 + p { margin-top: 0 }
		> h1, > h2, > h3, > h4, > h5, > h6 { color: var(--heading-fg) }

		h1, h2, h3, h4, h5, h6
			position relative
			display block

			.anchor-link
				flex-grow 1
				padding 0 0.5em
				font-weight normal
				font-size 75%
				text-decoration underline
				color transparent
				
				&:focus-visible
					color var(--fg)

			&:hover
				.anchor-link
					color var(--fg)

		@media (max-width: 600px)
			h1, h2, h3, h4, h5, h6
				.anchor-link
					padding 0 0.25em
					font-weight normal
					font-size 75%
					text-decoration none
					position absolute
					right 0
					top 0

		> p code, > ol code, > ul code, > h1 code, > h2 code, > h3 code, > h4 code, > h5 code, > h6 code, blockquote code
			padding 0.25em
			border-radius 0.25em
			background-color var(--inline-code-bg)

	&> header
		font-family var(--msff), monospace
		position relative
		display flex
		background-color var(--header-bg)
		color var(--fg)
		box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
		margin-bottom 0.5em

		@media (max-width: 600px)
			flex-direction column
			font-size 125%

		&> section { display: flex }
		&> section > a
			text-decoration none
			line-height 1.5em
			display flex
			justify-content center
			align-items center
			padding 0.25em 0.5em
			color var(--fg)

			&:visited { color: var(--fg) }
			&:hover { background: var(--header-hover-bg) }
			&> img { max-width: 48px }
			&> h1
				font-weight 300
				font-size 150%

input, textarea
	background var(--input-bg)
	border 0
	font inherit
	padding 0.5em 1em
	color var(--input-fg)
	border-radius 0.25em

	&:focus { background: var(--input-focus-bg) }
	&:hover { background: var(--input-hover-bg) }

button, input[type=submit]
	font inherit
	background var(--button-bg)
	color var(--button-fg)
	cursor pointer
	border 0
	padding 0.5em 1em

	&:focus { background: var(--button-hover-bg) }
	&:hover { background: var(--button-hover-bg) }

.lead { font-size: 1.5rem }
.rounded { border-radius: 0.5em }

table tr > td.leading
	padding-right 1em

table tr > td
	vertical-align top
	padding-top 0.25em
	padding-bottom 0.25em

form
	&> label, > fieldset
		border 0
		display flex
		flex-direction column

	&> fieldset ~ label,
	&> label ~ fieldset,
	&> label ~ label,
	&> fieldset ~ fieldset
		margin-top 0.5em

.js-only { display: none !important } // script removes this class on load
.no-bg { background: none }
.hidden-in-browsers { display: none }

.centerize
	display flex
	justify-content center
	align-items center
	align-content center

#logo-shadow { stroke: var(--icon-shadow) }

@media (max-width 600px)
	.hidden-on-mobile { display: none }

.hide-unless-focused
	transform translateY(-200%)
	position fixed
	top 0.5em
	left 0.5em
	padding 0.5em 0.8em
	border dotted 0.1em #ccc
	border-radius 0.25em
	box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
	background rgba(0, 0, 0, 0.8)

	&:focus
		transform translateX(0%)

@media (min-width 600px)
	body.align-left
		.hide-in-align-left { display: none }
		.with-align { text-align: left }

	body.align-center
		.hide-in-align-center { display: none }
		.with-align { text-align: center }
		&> main, > footer
			h1, h2, h3, h4, h5, h6
				line-height 1.5em
				text-align left

			h1, h2, h3, h4, h5, h6, form, ul, ol, p, table, .content, details
				position relative
				max-width 600px
				margin-left auto
				margin-right auto

			.highlight
				border-left 0

				pre.chroma
					padding 0
					display flex
					flex-direction column
					width auto
					flex 1
					justify-content center
					align-content center
					align-items center
					margin-left auto
					margin-right auto

					> code
						width: 600px;
						padding 0.25em 0.5em
						border-left solid var(--syntax-bpx) var(--syntax-ledg)

			img,
			embed,
			frame,
			iframe
				max-width 100%
				margin-left auto
				margin-right auto
				display block

ul.horizontal-blocks
	display flex
	flex-wrap wrap
	list-style none
	padding 0
	gap 0.5em

	> li
		flex 1
		display flex

		> a
			flex-grow 1
			display flex
			padding 0.5em 2em
			background-color var(--button-bg)
			text-align center
			justify-content center
			align-items center
			text-decoration none
			white-space nowrap

			&:hover
				background-color var(--header-bg)