html:before {
	/* BREAKPOINT INDICATOR */
	content: "XXS";
	font-family: Verdana, sans-serif;
	font-size: 9px;
	color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 0;
	display: none;
}	
html.debug:before {
	display: block;
}
html.debug * {
	outline: 1px dashed red;
}

:root {
	background-repeat: repeat;
}
body {
	margin-top: 0;
	overflow-x: hidden;
}

main {
	margin: 0 auto;
	padding: 2%;
}

a:link,
a:visited {
	text-decoration: underline;
}
a:visited {
}
a:hover,
a:active {
	color: var(--pink);
}

header {
	border-bottom: 1px solid var(--pink);
	padding-bottom: 1rem;
}
.site-header {
	/* padding-bottom: calc(1rem + 2%); */
}
.site-header h1 a:link {
	text-decoration: none;
}
nav {
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* justify-content: space-between; */
}
nav > ul {
	margin-top: 0;
	display: inline;
	/* flex-wrap: wrap; */
}
nav > ul.meta-nav {
	display: inline-block;
}
nav > ul.meta-nav > li:last-child {
	margin-right: -0.5rem;
}
nav li {
	/* margin-top: 0; */
}
nav a:link {
	/* color: var(--pink); */
	text-decoration: none;
}
nav > ul > li {
	position: relative;
	margin: -0.25rem 0.5rem 0 -0.5rem;
	padding: 0.25rem 0.5rem 0.5rem;
	white-space: nowrap;
	display: inline-block;
}
nav > ul > li > a {
	font-variation-settings: "wght" 650;
}
/* nav > ul li.tab:hover > a,
nav > ul li.tab a.more-link {
	color: var(--pink);
} */
nav > ul a:hover {
	text-decoration: underline;
}
/* nav > ul > li.tab::after {
	content: '▾';
} */
nav > ul > li.tab:hover::after {
	color: var(--pink);
}
nav >ul > li.tab:hover {
	/* z-index: 1;
	background-color: #FFF;
	outline: 1px solid var(--pink);
	box-shadow: 0.25rem 0.25rem 0 var(--pink); */
}
nav > ul > li > ul {
	display: none;
	position: absolute;
	font-size: 0.875em;
	line-height: 1;
	top: 1.75rem;
	left: 0;
	min-width: 100%;
	margin-top: 0.25rem;
	padding: 0.5rem 0.5rem 1rem 0.5rem;
	background-color: #FFF;
	outline: 1px solid var(--pink);
	box-shadow: 0.25rem 0.25rem 0 var(--pink);
}
nav > ul > li:hover > ul {
	/* display: block; */
	z-index: 2;
	color: var(--pink);
}
nav > ul > li > ul > li + li {
	margin-top: 0.75em;
}
.tags-page .tags,
.designers-page .designers,
.publishers-page .publishers,
.character-sets-page .character-sets,
.licenses-page .licenses {
	/* color: var(--pink); */
}
h1 {
	font-size: 1.5em;
	font-variation-settings: "wght" 600, "opsz" 20;
	margin-top: calc(1rem + 2%);
	color: var(--pink);
}
.site-header h1,
.error h1 {
	font-size: 2em;
	font-variation-settings: "wght" 800, "opsz" 20;
	margin-top: 0;
}
.breadcrumbs {
	margin-top: 2%;
}
.breadcrumbs + h1 {
	margin-top: 0;
}
.tags-page .listing-header h1::first-letter {
	text-transform: capitalize;
}
.beta {
	font-size: 0.625rem;
	font-variation-settings: "wght" 600, "opsz" 8;
	display: inline-block;
	position: relative;
	top: -1.25em;
	margin-left: 0.25em;
	color: var(--blue);
}
a.about-i {
	font-variation-settings: "wght" 700;
	display: block;
	color: #fff;
	background-color: var(--blue);
	line-height: 1;
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
	float: right;
	margin-top: 0.625em;
	text-decoration: none;
}

/* .tagline, */
h2,
h3,
h4 {
	font-variation-settings: "wght" 650;
}
h2 {
	color: var(--pink);
}
h2 {
	margin-top: 2rem;
}
h2 + p {
	margin-top: 0.5rem;
}
h3 {
}
h4 {
	margin-top: 1em;
}
p,
aside,
.bulleted {
	max-width: 68ex;
}
table {
	font-variant-ligatures: none;
	width: 100%;
}
th,
td {
	vertical-align: top;
}
tr + tr th,
tr + tr td {
	padding-top: 0.5em;
}
th {
	padding-right: 0.5em;
	width: 5rem;
}
.tags td {
	line-height: 1.5;
	padding-bottom: 1rem;
}

a.tag,
.designers span {
	white-space: nowrap;
	/*
	text-decoration: none;
	color: #FFF;
	background-color: var(--pink);
	border-radius: 0.25em;
	padding: 0 0.375em 0.125em;
	display: inline-block;
	margin: 0 0.25em 0.375em 0;
*/
}
.info_link a {
	color: var(--pink);
}
.info_link a:hover,
.info_link a:active {
	color: var(--blue);
}
.tagline,
figcaption,
.controls,
.breadcrumbs,
.meta,
.count,
footer {
	font-size: 0.75em;
	font-variation-settings: "wght" 360, "opsz" 12;
}
strong {
	font-weight: bold;
}
cite,
em,
i {
	font-style: italic;
}

.warning {
	color: var(--pink);
	padding: 0.5%;
	background-color: var(--yellow);
	border: 0.2em solid var(--pink);
	margin-top: 1em;
}
.warning p {
	border: 0.2em solid var(--pink);
	padding: 1% 2% calc(1% + 0.25em);
	max-width: none;
}
/*
.cff-warning {
	font-size: 0.75em;
	font-variation-settings: 'wght' 250, 'opsz' 12;
}
*/
#support-warning {
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: calc(0.2em - 1px);
}
@supports (font-variation-settings: "wght" 200) {
	#support-warning {
		display: none;
	}
	strong {
		font-weight: normal;
		font-variation-settings: "wght" 500;
	}
}

.listing-meta {
	/* margin-top: 0; */
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.results {
	margin-top: 0;
	white-space: nowrap;
	padding-left: 0.5rem;
}

#typefaces,
.typeface,
.admin-links {
	margin-top: 0;
}
.typeface {
	position: relative;
	padding: calc(0.5rem + 2%) 0 calc(1rem + 2%);
	border-bottom: 1px solid var(--pink);
}
/* a.staff-pick-star {
	color: var(--yellow);
	text-decoration: none;
	position: relative;
}
a.staff-pick-star::before {
	content: '★';
	-webkit-text-stroke: 1px var(--pink);
	position: absolute;
	left: 0;
}
a.staff-pick-star:hover {
	color: var(--pink);
} */
.admin-links {
	position: absolute;
	top: calc(1rem + 2%);
	right: 0;
}
.admin-links a {
	text-decoration: none;
}
.link-to-font:link {
	text-decoration: none;
}
.link-to-font:hover {
	text-decoration: underline;
}
.link-to-edit {
	visibility: hidden;
}
.typeface:hover .link-to-edit {
	visibility: visible;
}
/*
.typeface::after {
	content: '';
	display: table;
	clear: both;
}
*/

.content {
	margin-top: 0;
}
.font {
}
.fonts {
	margin-top: 0;
}
.fonts,
.details {
	padding-top: 1rem;
}
.details {
	margin-top: 0.5rem;
}
.controls {
	white-space: nowrap;
}
.controls th,
.controls td {
	vertical-align: middle;
	white-space: nowrap;
}
.min_val {
	text-align: right;
}
.slider {
	padding-left: 0.25em;
	padding-right: 0.25em;
}
input[type="range"] {
	margin: 0;
	vertical-align: middle;
}
figure {
}
.fonts {
	/*
	padding-left: 0.2em;
	padding-right: 0.2em;
	margin-left: -0.2em;
	margin-right: -0.2em;
*/
}
.draft/* , .tags-page */ {
	background-image: url("/assets/draft-bg.svg");
	background-repeat: repeat;
}
.sample,
.no_sample {
	font-size: 2em;
	line-height: 1;
	margin-top: 0;
}
.sample {
	color: #000;
	/*
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
*/
	width: 100vw;
	margin: -0.25em 0 -0.25em -2vw;
	padding: 0.25em 6vw 0.25em 2vw;
	white-space: nowrap;
	overflow-x: auto;
	/* font-optical-sizing: none; */
}
.no_sample {
	color: #ccc;
	font-variation-settings: "wght" 300, "opsz" 20;
}
.grayscale {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[contenteditable="true"]:focus {
	outline: none;
}

.bulleted li {
	margin-left: 1.2em;
	margin-top: 0.5em;
	list-style-type: disc;
}
.bulleted .bulleted li,
.bulleted .bulleted {
	margin-top: 0.25em;
}
.bulleted .bulleted li {
	list-style-type: circle;
}

a.load-more,
.loading-more,
a.big-button {
	color: #fff;
	background-color: var(--pink);
	border-radius: 0.25em;
	display: block;
	padding: 0.75em 0.5em 1em 0.5em;
	text-align: center;
	width: 100%;
	text-decoration: none;
	position: relative;
	margin-top: 3em;
}
a.load-more,
.loading-more {
}
a.big-button {
	box-shadow: 3px 3px 0px 0px var(--blue), 2px 2px 0px 0px var(--blue),
		1px 1px 0px 0px var(--blue);
}
a.big-button:hover,
.loading-more {
	top: 1px;
	left: 1px;
	box-shadow: 2px 2px 0px 0px var(--blue), 1px 1px 0px 0px var(--blue);
}
a.big-button:active {
	top: 2px;
	left: 2px;
	box-shadow: 1px 1px 0px 0px var(--blue);
}
.loading-more {
	color: var(--pink);
	background-color: #f2e94e;
}
.spinner {
	display: inline-block;
	font-family: "Zycon", "Blank";
	font-size: 2em;
	vertical-align: middle;
	margin-top: -0.15em;
	line-height: 1rem;
	animation: spinnee 6s linear 0s infinite;
}
@keyframes spinnee {
	0% {font-variation-settings: "M2  " -1, "M1  " -1;}
	8.3% {font-variation-settings: "M2  " -0.83, "M1  " 1;}

	8.31% {font-variation-settings: "M2  " -0.83, "M1  " -1;}
	16.7% {font-variation-settings: "M2  " -0.67, "M1  " 1;}

	16.71% {font-variation-settings: "M2  " -0.67, "M1  " -1;}
	25% {font-variation-settings: "M2  " -0.5, "M1  " 1;}

	25.01% {font-variation-settings: "M2  " -0.5, "M1  " -1;}
	33.3% {font-variation-settings: "M2  " -0.33, "M1  " 1;}

	33.31% {font-variation-settings: "M2  " -0.33, "M1  " -1;}
	41.7% {font-variation-settings: "M2  " -0.17, "M1  " 1;}

	41.71% {font-variation-settings: "M2  " -0.17, "M1  " -1;}
	50% {font-variation-settings: "M2  " 0, "M1  " 1;}

	50.01% {font-variation-settings: "M2  " 0, "M1  " -1;}
	58.3% {font-variation-settings: "M2  " 0.17, "M1  " 1;}

	58.31% {font-variation-settings: "M2  " 0.17, "M1  " -1;}
	66.7% {font-variation-settings: "M2  " 0.33, "M1  " 1;}

	66.71% {font-variation-settings: "M2  " 0.33, "M1  " -1;}
	75% {font-variation-settings: "M2  " 0.5, "M1  " 1;}

	75.01% {font-variation-settings: "M2  " 0.5, "M1  " -1;}
	83.3% {font-variation-settings: "M2  " 0.67, "M1  " 1;}

	83.31% {font-variation-settings: "M2  " 0.67, "M1  " -1;}
	91.7% {font-variation-settings: "M2  " 0.83, "M1  " 1;}

	91.71% {font-variation-settings: "M2  " 0.83, "M1  " -1;}
	100% {font-variation-settings: "M2  " 1, "M1  " 1;}
}

.index-list {
	column-width: 9rem;
	column-gap: 1rem;
	
	/* display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); */
}
.index-list li {
	/* width: 9rem; */
	margin: 0 0 0.5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}
.tag-list {
	/* grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)); */
	/* column-width: 11.5rem; */
}
.has-description::after {
	content: '*';
	color: var(--pink);
}
.needs-links {
	color: var(--pink);
}
.count {
	color: var(--gray);
}

aside {
	font-size: 0.875em;
	line-height: 1.375;
	font-variation-settings: "wght" 250, "opsz" 14;
}
.ref,
a.ref,
a.refback {
	text-decoration: none;
	color: var(--pink);
}

*:target {
	animation: target-highlighter 3s 1;
}
@keyframes target-highlighter {
	0% {
		background-color: rgba(242, 233, 78, 0.5);
	}
	100% {
		background-color: rgba(242, 233, 78, 0);
	}
}

table.support {
	margin: 1em 0 3em;
	width: intrinsic;
}
.support th,
.support td {
}
.support th {
	width: 10.25em;
}
.support h3 {
	margin-top: 1em;
}
.support .icon {
	padding-right: 0.5em;
	width: 2em;
}

footer {
	padding-top: calc(5em + 2%);
}
.site-footer p {
	max-width: none;
}
.about-page .about-link {
	display: none;
}

.Italic {
	font-style: italic;
}
/* .all-caps {text-transform: uppercase;} */
/* .smcp {font-variant-caps: all-small-caps;} */

.XS {
	font-size: 1em;
}
.S {
	font-size: 1.5em;
}
.M {
	font-size: 2em;
}
.L {
	font-size: 3em;
}
.XL {
	font-size: 4em;
}
.XXL {
	font-size: 5.5em;
}
.XXXL {
	font-size: 7em;
}

input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	margin: 11.5px 0;
}
input[type="range"]:focus {
	/* outline: none; */
}
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: var(--blue);
	border-radius: 0px;
	border: 0px solid #ffffff;
}
input[type="range"]::-webkit-slider-thumb {
	box-shadow: 0px 0px 5px #ffffff, 0px 0px 0px #ffffff;
	border: 0px solid #ffffff;
	height: 24px;
	width: 16px;
	border-radius: 3px;
	background: #ff007a;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -11.5px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #48a2dd;
}
input[type="range"]::-moz-range-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: var(--blue);
	border-radius: 0px;
	border: 0px solid #ffffff;
}
input[type="range"]::-moz-range-thumb {
	box-shadow: 0px 0px 5px #ffffff, 0px 0px 0px #ffffff;
	border: 0px solid #ffffff;
	height: 24px;
	width: 16px;
	border-radius: 3px;
	background: #ff007a;
	cursor: pointer;
}
input[type="range"]::-ms-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type="range"]::-ms-fill-lower {
	background: #268acc;
	border: 0px solid #ffffff;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-fill-upper {
	background: var(--blue);
	border: 0px solid #ffffff;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-thumb {
	box-shadow: 0px 0px 5px #ffffff, 0px 0px 0px #ffffff;
	border: 0px solid #ffffff;
	height: 24px;
	width: 16px;
	border-radius: 3px;
	background: #ff007a;
	cursor: pointer;
	height: 1px;
}
input[type="range"]:focus::-ms-fill-lower {
	background: var(--blue);
}
input[type="range"]:focus::-ms-fill-upper {
	background: #48a2dd;
}

@media (min-width: 20em) {
	html:before {
		content: "XS";
	}
}
@media (min-width: 38em) {
	html:before {
		content: "S";
	}
	.site-header h1 {
		display: inline;
	}
}
@media (min-width: 48em) {
	html:before {
		content: "M";
	}
	nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	nav > ul {
		/* justify-content: space-between; */
	}
	
	/*
	.typeface .content {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-content: flex-start;
	}
	.typeface .details {
		width: 20em;
		margin: 0;
	}
	.typeface .fonts {
		flex-grow: 1;
		margin-left: 3%;
	}
*/
	/*
	.typeface .details,
	.typeface .fonts {
		display: inline-block;
	}
*/
	.typeface .fonts {
		width: calc(100% - 20em - 3%);
		margin-left: 3%;
		float: right;
	}
	.typeface .details {
		width: 20em;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		margin-top: 0;
	}
	.content::after {
		content: "";
		display: table;
		clear: both;
	}
	.sample {
		white-space: normal;
		-ms-word-break: break-all;
		word-break: break-all;
		width: 100%;
		margin: -0.25em 0;
		padding: 0.25em 0;
		overflow: visible;
	}
	.sample br {
		display: none;
	}
	/*
	.sample span {
		white-space: nowrap;
	}
*/
}
@media (min-width: 64em) {
	html:before {
		content: "L";
	}
}
@media (min-width: 80em) {
	html:before {
		content: "XL";
	}
}
@media (min-width: 96em) {
	html:before {
		content: "XXL";
	}
	/* 	html {zoom: 120%;} */
}

/* TODO Clean up temp styles by Piper below */
.filter-group {
	border-bottom: 1px solid var(--pink);
	padding-bottom: calc(1rem + 2%);
}

.filter-details summary {
	cursor: pointer;
}

.filter-details summary:hover > * {
	text-decoration-line: underline;
}

.filter-desc {
	display: inline-block;
}

.filter__heading {
	margin-top: 0;
}

.filter__heading:after {
	content: ": ";
	margin-right: 1ch;
}

.filter__list {
	margin-top: 0;
}

.filter__item {
	display: inline;
}

.filter__item:after {
	content: ", ";
}

.filter__item:last-child:after {
	content: none;
}