@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');

LIGHT-STRESS = #c33500;
DARK-STRESS = #c34564;

.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%;

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

	.bg-black &
		background: black;

	.bg-white &
		background: white;

	.color-dark &
		color: white;

.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: LIGHT-STRESS;

.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: DARK-STRESS;

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;

	.bg-black &
		background: black;

	.bg-white &
		background: white;

	.color-dark &
		color: white;

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.cv-sampler
	width: 8em;
	font-size: 32px;

	> span.run
		text-align: center;
		display: inline-block;
		width: 1em;

		&.italic
			font-style: italic;

	.bg-black &
		background: black;

	.bg-white &
		background: white;

	.color-dark &
		color: white;

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

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

		&.rank-2, &.rank-3, &.rank-4
			color: LIGHT-STRESS;

	s
		text-decoration: none;
		opacity: 0.25;

	.bg-black &
		background: black;

	.bg-white &
		background: white;

	.color-dark &
		color: white;

		em
			color: white;

		em.rank-2, em.rank-3, em.rank-4
			color: DARK-STRESS;

#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: LIGHT-STRESS;

	&.scl
		width: 19rem;

		p
			display: block;

			>.col
				display: block;
				flex: none;

	.bg-black &
		background: black;

	.bg-white &
		background: white;

	.color-dark &
		color: white;

		b
			color: DARK-STRESS;