style.css

@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&display=swap');

:root {
	--font-body: 'Helvetica Neue', Segoe UI, sans-serif;
	--font-heading: 'Cabin Sketch', var(--font-body);
	--font-mono: Consolas, Monaco, monospace;

	--color-green-hs: 90 40%;
	--color-blue-hs: 200 40%;
	--color-green: hsl(var(--color-green-hs) 70%);
	--color-dark-green: hsl(var(--color-green-hs) 35%);
	--color-pale-blue: hsl(var(--color-blue-hs) 96%);
	--color-dark-blue: hsl(var(--color-blue-hs) 40%);
}

body {
	margin: .5rem;
	font: 300 100%/1.5 var(--font-body);
}

h1, h2, h3 {
	margin: 0;
	font-family: var(--font-heading);
	line-height: 1.1;
}

h2 {
	font-size: 300%;
}

a {
	color: var(--color-dark-blue);
}

body > header {
	margin-top: 1.5em;
	margin-bottom: 1em;
}

	body > header > h1 {
		margin: 0;
		text-align: center;
		font-size: 500%;
	}

		body > header > h1::before {
			content: "🐍";
			display: block;
			font-size: 150%;
		}

	body > header > h2 {
		margin-bottom: .5em;
		text-align: center;
		font-size: 200%;
	}

	body > header li::marker {
		content: "✔";
		color: var(--color-green);
	}

	@media (min-width: 40em) {
		body > header ul {
			columns: 2;
		}
	}

body > section,
body > header > *,
body > footer > * {
	max-width: 80em;
	margin: auto;
}

#tryout {

}

	#tryout h2 {
		display: flex;
		font-size: 200%;
	}

		#tryout h2 code {
			margin-left: auto;
			font-size: 60%;
			background: none;
		}

	#tryout header {
		grid-column-end: span 2;
		position: sticky;
		top: 0;
		display: block;
		background: white;
	}

	#selectorText {
		display: block;
		border: 3px solid var(--color-green);
		border-radius: .2em;
		padding: .2em .4em;
		margin-bottom: .4em;
		font-size: 140%;
		font-family: var(--font-mono);
		width: 100%;
		box-sizing: border-box;
	}

	#specificity-display {
		grid-column: 1 / span 2;
		display: grid;
		margin: .5em 0;
		padding: 1em;
		background: var(--color-green);
		font-family: var(--font-heading);
		font-size: 150%;
	}

		#specificity {
			font-family: var(--font-body);
			font-size: 200%;
		}

		@media (min-width: 600px) {
			#specificity-display {
				grid-template-columns: 1fr auto;
			}

			#specificity {
				grid-column: 2;
				grid-row: 1 / span 2;
			}
		}

		#specificity-display code {
			background: none;
			text-shadow: 0 0 .1em white;
			font-size: 75%;
		}

	#results {
		display: flex;
		gap: .5em;
	}

		@media (min-width: 60em) {
			#results > article {
				flex: 1;
			}
		}

		#results > article {
			flex-shrink: 1;
			overflow: hidden;
			transition: .5s;
		}

		@media (max-width: 60em) {
			#results > article h2 code {
				display: none;
			}

			#results > article {
				flex-basis: 0;
				min-width: 5em;
			}
		}

		#results > article:not(:focus-within):not(:active):not(:hover) + article:nth-child(2),
		#results > article:focus-within,
		#results > article:active,
		#results > article:hover {
			flex-grow: 1;
		}

		#tryout pre {
			grid-row: 2;
		}

.error {
	color: #c00;
}

body > footer {
	padding: 1em;
	margin: -.5rem;
	margin-top: 1em;
	background: var(--color-dark-blue);
	color: white;
	font-weight: bolder;
}

	body > footer a {
		color: var(--color-pale-blue);
	}