@import url('iosevka/iosevka.css');
@import url('iosevka-slab/iosevka-slab.css');
@import url('iosevka-aile/iosevka-aile.css');
@import url('iosevka-etoile/iosevka-etoile.css');

.thin, .wght-100
	font-weight: 100;

.extralight, .wght-200
	font-weight: 200;

.light, .wght-300
	font-weight: 300;

.medium, .wght-500
	font-weight: 500;

.semibold, .wght-600
	font-weight: 600;

.bold, .wght-700
	font-weight: 700;

.extrabold, .wght-800
	font-weight: 800;

.heavy, .wght-900
	font-weight: 900;

.italic
	font-style: italic;

.slab
	font-family: 'Iosevka Slab Web', monospace;

	&.oblique
		font-family: 'Iosevka Slab Web Oblique', monospace;

.oblique
	font-family: 'Iosevka Web Oblique', monospace;

.iosevka
	font-family: 'Iosevka Web', monospace;

.iosevka-slab
	font-family: 'Iosevka Slab Web', monospace;

.iosevka-aile
	font-family: 'Iosevka Aile Web', monospace;

.iosevka-etoile
	font-family: 'Iosevka Etoile Web', monospace;

html, body
	margin: 0;
	padding: 0;

body
	font-family: 'Iosevka Web';
	background: #008000;
	padding-bottom: 60em;
	font-size: 15px;

pre, code
	font-family: 'Iosevka Web';

::-webkit-scrollbar
	display: none;

body > section
	margin: 3em auto;
	width: 900px;
	background: white;

/* hljs */
section.preview
	text-align: center;
	font-size: 80%;

section.preview pre
	display: inline-block;
	text-align: left;
	margin: 1.2rem 0;
	line-height: 1.5;

section.color-light
	background-color: hsl(39, 6%, 95%);
	color: #333;

.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title
	color: #446fbd;

.color-light .comment
	color: hsl(0, 0%, 62%);

.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in
	color: #8757ad;

.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value
	color: #e88501;

.color-light .number, .color-light .xml .attribute
	color: #6d8600;

.color-light .operator
	color: #c33500;

section.color-dark
	background-color: hsl(39, 6%, 12%);
	color: #cfcfcf;

.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title
	color: #6c9ef8;

.color-dark .comment
	color: #767676;

.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in
	color: #b77fdb;

.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value
	color: #D89333;

.color-dark .number, .color-dark .xml .attribute
	color: #85a300;

.color-dark .operator
	color: #c34564;

section#matrix
	height: 480px;
	position: relative;

	> div
		position: absolute;
		font-size: 90px;
		left: 50%;
		margin-left: -4.75em;
		top: 50%;
		margin-top: -1.95em;

		> row
			display: block;
			text-align: center;
			line-height: 0.8em;

			> span
				font-size: 0.4em;
				padding: 0 0.5em;

		&.slab
			margin-left: -4.25em;
			margin-top: -1.44em;

section#matrix > div > row > span
	font-size: 0.4em;
	padding: 0 0.5em;

section.char-vars, section.style-sets
	width: 30em;
	padding: 1.5em 8em;

	> h2
		display: none;

	> div.hr
		font-size: 80%;
		font-stretch: expanded;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		margin: 0 auto 3rem;
		text-align: center;
		display: block;

		&:before, &:after
			content: '';
			display: inline-block;
			border-bottom: 1px solid #ddd;
			width: 4em;
			margin: 0 1em;
			vertical-align: 0.3em;

section.char-vars
	> ol.narrow
		font-size: 0.75em;
		width: 56em;
		list-style: none;
		margin: 0 -9em;
		padding: 0;
		columns: 2;
		justify-content: left;
		overflow: hidden;

		> li
			flex: none;
			display: flex;
			width: 26em;
			box-sizing: border-box;
			-webkit-column-break-inside: avoid;

			> .triangle
				display: block;
				flex: none;
				position: relative;
				right: -0.025em;
				width: 0.5em;
				font-feature-settings: 'NWID' on;
				font-weight: 200;
				font-size: 2em;
				margin-top: 0.5em;
				width: 0.5em;
				text-align: center;
				margin-right: -0.0625em;

				&::before, &::after
					content: '';
					position: absolute;
					right: calc(0.275em - 0.5px);
					width: 1px;
					background: #ddd;

				&::before
					top: 0;
					height: 0.42em;

				&::after
					top: 0.85em;
					bottom: 0;

			> ol.group
				list-style: none;
				margin: 0;
				padding: 0;
				flex: 1;
				display: flex;
				flex-wrap: wrap;

				&.header
					width: 5em;
					justify-content: flex-end;
					flex: none;

			.desc-group
				border: none;
				margin: 0;
				padding: 0 0.5em;
				width: 2.5em;
				box-sizing: border-box;
				flex: none;
				display: flex;
				justify-content: center;
				position: relative;

				&.ligature
					width: 5em;

				> .label
					font-size: 0.75em;
					display: block;
					position: absolute;
					width: 2em;
					left: 50%;
					top: 0.4375em;
					margin-left: -1em;
					margin-right: -1em;
					font-weight: 400;
					opacity: 0.75;
					text-align: center;

				&.ligature > .label.tag
					&:before, &:after
						position: absolute;
						content: '';
						display: block;
						width: 0.75em;
						border-bottom: 1px solid #ddd;
						top: 0.6em;

					&:before
						right: 100%;
						margin-right: 0.25em;

					&:after
						left: 100%;
						margin-left: 0.25em;

				> .sample
					display: inline-block;
					font-weight: 300;
					font-size: 2em;
					margin-top: 0.5em;
					width: 1em;
					text-align: center;
					white-space: nowrap;

#ligation-sampler
	font-size: 12px;
	width: 42em;
	padding: 1em;

	em
		font-style: normal;
		color: #444;

		&.rank-2
			color: #c33500;

	s
		text-decoration: none;
		opacity: 0.25;

#packaging-sampler
	width: 44rem;

	> .inner
		padding: 1rem;

	p
		display: flex;
		margin: 0;
		line-height: 1.5em;

		> .col
			flex: 1;
			margin: 0 1ch;

	b
		font-weight: normal;
		color: #c33500;

	&.scl
		width: 19rem;

		p
			display: block;

			>.col
				display: block;
				flex: none;