:where( html ) {
	box-sizing: border-box ;

	& *,
	& *:before,
	& *:after {
		box-sizing: inherit ;
	}
}

:where( * ) {
	&:focus,
	&:focus-visible {
		animation-duration: 200ms ;
		animation-fill-mode: forwards ;
		animation-iteration-count: 1 ;
		animation-name: outlineEnter ;
		animation-timing-function: ease-out ;
		outline-color: hotpink ;
		outline-offset: 4px ;
		/* outline-style: solid ; */
		outline-width: 2px ;
	}
}

@keyframes outlineEnter {
	from {
		outline-offset: 8px ;
	}
	to {
		outline-offset: 4px ;
	}
}

body {
	font-family: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif ;
	font-size: 18px ;
	line-height: 1.4 ;
}

button,
input:where([type="text"]),
select,
textarea {
	color: inherit ;
	font-family: inherit ;
	font-size: 20px ;
	line-height: inherit ;
	padding: 5px 10px ;
}

button {
	padding: 5px 15px ;
}

a {
	color: red ;
}

details {
	border: 1px solid #cccccc ;
	margin-block-start: 10rem ;
	padding: 10px ;

	&[ open ] {
		background-color: #f0f0f0 ;
	}

	& > summary {
		cursor: pointer ;
		scroll-margin-block-start: 35px ;

		/*
			By default, the browser doesn't appear to give an outline to the summary
			element. As such, I'm explicitly giving it an outline when focused.
		*/
		&:focus,
		&:focus-visible {
			outline-style: solid ;
		}
	}

	& > section {
		margin: 10px 0 0 0 ;
	}
}