/* mobile first */
:root {
	--accent-color: olivedrab;
	--secondary-color: orange;
	font-family: system-ui, sans-serif;
	font-size: clamp(15px, 10px + 1vw, 25px);
}

body {
	margin: 5vw;
	margin-top: 3vh;
	max-width: 75ch;
}

header, div:has(pre), :not(div) > pre,  details {
	border: 2px solid var(--accent-color);
	box-shadow: 5px 5px 0px var(--accent-color);
}


/* header styling */
header {
	background: white;
	min-width: fit-content;
	margin-bottom: 2ch;
	padding: 1ch;

	> hgroup {
		> h1::first-letter {
			text-transform: capitalize;
		}
		> p {
			color: dimgrey;
		}
	}
}

/* inline simple styling */
del {
	color: firebrick;
	text-decoration: none;
}

ins {
	text-decoration: none;
}

q {
	font-style: italic;
}

var {
	text-decoration: underline;
}

/* headers styling */
main :is(h2, h3, h4, h5, h6) {
	border-bottom: 2px solid var(--accent-color);
	margin-bottom: 1ch;
	margin-top: 1ch;
	width: fit-content;
}

/* list styling */
ol, ul {
	margin-left: 5ch;
}

/* inline code styling */
:not(pre) > code {
	background: var(--secondary-color);
	color: black;
	font-weight: bold;
	font-size: .8rem;
	padding: .2rem;
	font-size: 0.85rem;
	text-wrap: nowrap;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

div:has(pre), :not(div) > pre {
	padding: 1ch;
	margin-bottom: 2ch;
}

div:has(pre ~ label) {
	padding-bottom: 0;
}

pre {
	width: 100%;
	overflow: scroll;
	counter-reset: line;
	padding-left: 0;

	&:has(~ label) {
		padding-bottom: 1ch;
		border-bottom: 2px solid var(--accent-color);
	}
}

pre > code > span {
	position: relative;
	&::before {
		content: counter(line, decimal-leading-zero);
		counter-increment: line;
		display: inline-block;
		box-sizing: content-box;
		width: 3ch;
		border-right: 1px dashed darkgrey;
		margin-right: 1ch;
		padding-left: 1ch;
		position: sticky;
		left: 0;
		color: dimgrey;
		background: white;
	}
}

div:has(input:checked) pre {
	user-select: all;
}

pre ~ label {
	display: inline-flex;
	font-size: .85rem;
	width: 100%;
	padding: 1ch;
	gap: .75ch;
	align-items: center;
}

/* details styling */
details {
	margin-top: 1ch;
	margin-bottom: 1ch;
	padding: 1ch;

	&[open] > summary { 
		margin-bottom: 1ch; 
		padding-bottom: 1ch;
		border-bottom: 2px solid var(--accent-color);
	}
}

/* description list styling */
dd {
	padding-left: 5ch;
}

/* footer styling */
footer {
	border-top: 2px solid var(--accent-color);
	margin-top: 5ch;
	padding-top: 1ch;
}