: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-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 ;

	&:where(.isText) {
		background: transparent ;
		border-width: 0 ;
		cursor: pointer ;
		margin: 0 ;
		padding: 0 ;
		text-decoration: underline ;
	}
}

a {
	color: red ;
}


ul {
	& li {
		margin-bottom: 0.5rem ;
	}
}

.star {
	background: transparent ;
	border-width: 0 ;
	cursor: pointer ;
	margin: 0 ;
	padding: 0 ;

	&:after {
		content: "\2606" ;
	}
	&.isOn:after {
		color: hotpink ;
		content: "\2605" ;
	}
}