Iosevka/specimen.css

@import url(fonts.css);
html {
	font-size: 14px;
}

a {
	color: black;
	background-image: linear-gradient(white 50%, #888 50%);
	background-position: 0px 1.075em;
	background-repeat: repeat-x;
	background-size: 2px 2px;
	text-decoration: none;
	text-shadow: white -1px 0px 0px, white 1px 0px 0px;
}

a:hover {
	background-image: linear-gradient(white 50%, black 50%);
}

body {
	width: 68rem;
	margin: 0 auto;
	padding: 4rem 0;
}

body,
.show,
.show samp,
.pp {
	font-family: "IosevkaWEB", monospace;
	line-height: 1.5;
}

.langs {
	-moz-font-feature-settings: "locl";
	-ms-font-feature-settings: "locl";
	-webkit-font-feature-settings: "locl";
	font-feature-settings: "locl";
}

.cc,
.cc samp {
	font-family: "IosevkaCCWEB", monospace!important
}

.slab,
.slab samp {
	font-family: "IosevkaSlabWEB", monospace!important
}

.cc.slab,
.cc.slab samp {
	font-family: "IosevkaCCSlabWEB", monospace!important
}

p {
	margin: 0.5rem 0;
}

.show {
	font-size: 2rem;
	width: 68rem;
}

.show table.block {
	width: 68rem;
	border: none;
	table-layout: fixed;
	border-spacing: 0;
	border-collapse: collapse;
}

.show table.block td {
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	padding: 1rem;
	text-align: center;
	position: relative;
	cursor: default;
	border: none;
}

.show table.block td.missing {
	opacity: 0.1
}

.show table.block td > d.mark:before {
	content: "\E09E";
	color: #ddd;
	margin-right: -0.5em;
}

.show table.block td > d.tie:before,
.show table.block td > d.tie:after {
	content: "\E09E";
	color: #ddd;
}

.show table.block td.indicator > n {
	display: block;
	margin-top: -2rem;
	margin-left: -0.5em;
	font-size: 1rem;
}

.show table.block td.indicator > s {
	display: block;
	width: 0;
	height: 2rem;
	color: white;
}

.show table.block td.indicator > s:after {
	display: inline-block;
	content: '';
	position: relative;
	top: -1em;
	left: 3rem;
	width: 64rem;
	height: calc(0.52em - 2px);
	margin-right: -2em;
	border-top: 1px dashed rgba(0, 0, 255, 0.1);
	border-bottom: 1px dashed rgba(255, 0, 0, 0.1);
}

.show .lipsum {
	font-size: 1rem;
	margin: 1rem 0;
}

#picker {
	display: block;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 50%;
	font-size: 3rem;
	height: 4rem;
	margin-left: -34.5rem;
	width: 69rem;
}

#picker .menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 4rem;
	background: #ddd;
}

#picker:hover .menu {
	display: block;
}

#picker .menu .group {
	display: flex;
}

#picker .menu .group a {
	display: block;
	padding: 0.5rem;
	flex: 1;
	min-width: 10rem;
	background: #eee;
	text-shadow: none;
	font-size: 1rem;
}

#picker .menu .group a.italic,
#picker .menu .group a.oblique {
	flex: 2
}

#picker .menu .group a.slab {
	flex: 5
}

#picker .menu .group a.slab.italic,
#picker .menu .group a.slab.oblique {
	flex: 7
}

#picker .menu .group a:hover {
	background: #ddd;
}

#picker .title {
	background: black;
	color: white;
	display: block;
	line-height: 3rem;
	height: 3rem;
	padding: 0.5rem;
	position: relative;
	cursor: pointer;
}

#picker .title .icon {
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
	font-size: 2.5rem;
}

.usheet h3 {
	height: 0;
	position: relative;
	font-size: 1rem;
	font-weight: inherit;
	margin: 0 0 -1px;
	text-align: right;
	border-bottom: 1px solid black;
}

.usheet h3 span {
	display: block;
	position: absolute;
	right: 100%;
	background: black;
	color: white;
	padding: 0 0.25em;
}

#waiting {
	position: fixed;
	font-size: 2.5rem;
	bottom: 0.4em;
	left: 0.4em;
	width: 1em;
	height: 1em;
	border: 0.15em dotted black;
	background: white;
	border-radius: 1em;
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
	-ms-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}
@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}


pre,
code,
pre span,
code span {
	font-size: 1rem;
	font-family: inherit;
}

.keyword {
	color: blue
}

.string {
	color: green
}

.qualifier {
	color: #419
}

.comment {
	color: #999
}