app.css

.select {
	position: relative;
	display: inline-block;
	width: 100%
}

.select select {
	font-size: 14px;
	display: inline-block;
	width: 100%;
	cursor: pointer;
	padding: 10px 15px;
	outline: 0;
	border: none;
	border-radius: 8px;
	overflow: hidden;
	background: #334;
	color: #ccc;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none
}

.select select::-ms-expand {
	display: none
}

.select select:focus,
.select select:hover {
	color: #ddd;
	background: #445
}

.select select:disabled {
	opacity: .5;
	pointer-events: none
}

.select_arrow {
	position: absolute;
	pointer-events: none;
	top: 12px;
	right: 15px;
	width: 0;
	height: 0;
	border: solid #aaa;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg)
}

.select select:focus~.select_arrow,
.select select:hover~.select_arrow {
	border-color: #ccc
}

.select select:disabled~.select_arrow {
	border-top-color: #ccc
}

.svg-inline--fa {
	display: inline-block;
	font-size: inherit;
	height: 1em;
	overflow: visible;
	vertical-align: -.125em
}

.svg-inline--fa.fa-w-14 {
	width: .875em
}

body,
html {
	height: 100%
}

body {
	margin: 0;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
}

.content {
	grid-area: content;
	height: 100%;
	width: 100%
}

#app {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 72px 1fr;
	grid-template-areas: "header" "content";
	width: 100%
}

a {
	color: #4078c0;
	text-decoration: none
}

.flex {
	flex: 1
}

button:focus,
input:focus,
textarea:focus {
	outline: 0
}

.faq {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 64px
}

.faq #faq {
	text-align: center;
	font-weight: 500
}

.faq .question {
	margin-bottom: 46px
}

.faq table {
	border-collapse: collapse
}

.faq td {
	border: 1px solid #dfdfdf;
	padding: 8px 12px
}

@media (max-width:1100px) {
	#app {
		grid-template-rows: auto 1fr
	}
}

.codeblock {
	background: #334;
	padding: 12px 12px 4px 12px;
	max-width: calc(100vw - 56px);
	border-radius: 6px;
	margin: 0;
	color: #c9c5c4;
	font-size: 15px;
	position: relative;
	font-family: "Roboto Mono", "Courier New", Menlo, "DejaVu Sans Mono", Monaco, Courier, monospace
}

.codeblock .play-btn-fixed {
	position: absolute;
	top: 10px;
	right: 10px
}

.codeblock pre {
	overflow-x: auto;
	overflow-y: hidden;
	line-height: 1.2;
	font-family: "Roboto Mono", "Courier New", Menlo, "DejaVu Sans Mono", Monaco, Courier, monospace;
	white-space: pre-wrap
}

.codeblock textarea {
	font-size: 15px;
	line-height: 1.2;
	font-family: "Roboto Mono", "Courier New", Menlo, "DejaVu Sans Mono", Monaco, Courier, monospace;
	position: absolute;
	top: 48px;
	left: 10px;
	height: calc(100% - 48px);
	width: calc(100% - 22px);
	caret-color: #fff;
	color: transparent;
	background: 0 0;
	overflow: hidden;
	border: none;
	resize: none
}

.codeblock textarea.no-header {
	top: 25px
}

.codeblock .titlebar {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	position: relative;
	top: -2px
}

.codeblock .play-btn {
	background: 0 0;
	border: none;
	margin: 0;
	background: #ffffff33;
	color: #ffeeeecf;
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 12px;
	z-index: 10;
	cursor: pointer
}

.codeblock .play-btn svg {
	height: 1.1em
}

.codeblock .play-btn:hover {
	background: #ffffff55;
	color: #ffeeeedd
}

.codeblock .keyword {
	color: #dcd02d
}

.codeblock .return {
	color: #ea3b7b
}

.codeblock .key {
	color: #5f84ba
}

.codeblock .string {
	color: #ca763c
}

.codeblock .number {
	color: #b068e7
}

.codeblock .comment,
.codeblock .separator {
	color: #9e9795
}

.codeblock .definition,
.codeblock .type {
	color: #c5ac41
}

.documentation {
	display: flex;
	justify-content: center;
	max-width: 1200px;
	height: calc(100vh - 72px);
	padding-right: 6px;
	margin-left: auto;
	margin-right: auto;
	overflow-y: scroll
}

.documentation .toc {
	margin-right: 32px
}

.documentation .toc ul {
	padding-inline-start: 24px
}

.documentation .markdown {
	margin-left: 32px;
	padding-bottom: 64px;
	max-width: calc(100vw - 24px)
}

.documentation .markdown h1,
.documentation .markdown h2,
.documentation .markdown h3 {
	font-weight: 400
}

.documentation .markdown h1 {
	margin: 12px 0
}

.documentation .markdown h2 {
	margin: 32px 0 8px 0
}

.documentation .markdown h3 {
	margin: 8px 0
}

.documentation .markdown a {
	word-break: break-word
}

.documentation .markdown p {
	margin: 8px 0
}

.documentation .markdown p code {
	background: #eee;
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 14px
}

.documentation .markdown .markdownIt-Anchor {
	color: #c3cad6
}

.documentation .markdown .markdownIt-Anchor:hover {
	color: #4078c0
}

.documentation .markdown .codeblock {
	margin-bottom: 4px
}

@media (max-width:1100px) {
	.documentation {
		height: calc(100vh - 143px)
	}
}

@media (max-width:845px) {
	.documentation {
		height: calc(100vh - 154px)
	}
}

@media (max-width:800px) {
	.documentation {
		flex-direction: column;
		align-items: center;
		height: 100%;
		overflow-y: visible;
		padding-right: 0
	}
	.documentation .markdown {
		margin-left: 8px
	}
	.documentation .toc {
		margin-right: 0;
		margin-bottom: 32px
	}
}

.header {
	grid-area: header;
	height: 100%;
	width: 100%;
	position: sticky;
	background: #fff;
	z-index: 100;
	top: 0;
	display: flex;
	align-items: center
}

.header .logo {
	width: 32px;
	margin-bottom: -3px;
	margin-right: 16px
}

.header .donate-button {
	display: flex;
	/*flex-direction: column;*/
	align-items: center;
	margin-top: 2px;
	margin-left: 12px
}

.header .patreon img {
	height: 33px
}

.header .nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

.header .nav .item {
	color: #777;
	text-decoration: none;
	padding-right: 18px;
	padding-left: 18px;
	font-size: 22px;
	font-weight: 300
}

.header .nav .item.active {
	color: #222b38
}

	.header .donate-button .paypal {
		width: 80px;
		height: 33px;
		background: #3b7bbf;
		margin-bottom: 3px;
		border-radius: 3px;
		color: #fff;
		text-align: center;
		line-height: 32px;
		font-size: 15px
		margin-left: 10px;
	}
@media (max-width:1100px) {
	.header {
		position: static;
		flex-direction: column
	}
	.header .donate-button {
		flex-direction: row;
		margin-top: 8px;
		//margin-left: 0;
		margin-bottom: 8px
	}
	.header .donate-button .patreon {
		margin-right: 12px
	}
	/*
	.header .donate-button .paypal {
		width: 168px;
		height: 33px;
		background: #3b7bbf;
		margin-bottom: 3px;
		margin-left: 10px;
		border-radius: 3px;
		color: #fff;
		text-align: center;
		line-height: 32px;
		font-size: 15px
	}
	*/
	.header .logo {
		width: 42px;
		margin-top: 8px;
		margin-bottom: 12px;
		margin-right: 0
	}
}

.landing .hero {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: calc(100% - 32px);
	max-width: 1200px;
	color: #444;
	margin: 64px 0
}

.landing .hero .info {
	max-width: 500px
}

.landing .hero .info h1 {
	font-weight: 300;
	margin: 0 0 0 -2px
}

.landing .hero .info p {
	margin: 4px 0
}

.landing .hero .button {
	background: #222;
	color: #fff;
	margin-top: 16px;
	margin-right: 8px;
	padding: 7px 14px 6px 8px;
	border-radius: 6px;
	display: inline-flex;
	/*align-items: center;*/
	cursor: pointer;
	position: relative
}

.landing .hero .button .svg-inline--fa {
	width: 32px;
	height: 32px;
	margin-right: 4px
}

.landing .hero .button .options-container .options {
	position: absolute;
	background: #fff;
	color: #333;
	border: 1px solid #eee;
	right: 0;
	top: 54px;
	box-sizing: border-box;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-12px);
	transition: all .2s cubic-bezier(.67, .16, .4, 1)
}

.landing .hero .button .options-container .options .dl-option {
	display: flex;
	padding: 8px 8px 8px 6px;
	align-items: center;
	color: #333
}

.landing .hero .button .options-container .options .dl-option .name {
	flex: 1;
	margin-right: 32px
}

.landing .hero .button .options-container .options .dl-option .size {
	color: #818e9c;
	font-size: 15px
}

.landing .hero .button .options-container .options .dl-option svg {
	margin-right: 6px;
	width: 22px;
	height: 22px
}

.landing .hero .button .options-container .options .dl-option:hover {
	background: #f7f7f7
}

.landing .hero .button .options-container:focus {
	outline: 0
}

.landing .hero .button .options-container:focus .options {
	opacity: 1;
	pointer-events: all;
	transform: translateY(0)
}

.landing .hero .button .options-container:active .right-icon {
	transform: translateY(3px)
}

.landing .hero .button .options-container .right-icon {
	width: 18px;
	padding: 12px 2px;
	cursor: pointer;
	transition: transform .1s
}

.landing .hero .button .text {
	display: flex;
	flex-direction: column;
	margin-right: 10px
}

.landing .hero .button .text .link {
	margin: 0 4px 0 8px;
	font-size: 15px
}

.landing .hero .button .text .details {
	color: #ddd;
	padding: 0 4px;
	font-size: 13px;
	line-height: 18px;
	border-radius: 4px;
	margin-left: 5px
}

.landing .hero .button .text .details svg {
	fill: #ddd;
	position: relative;
	top: 2px;
	left: -1px
}

.landing .hero .button .changelog,
.landing .hero .button .fast {
	position: absolute;
	bottom: -24px;
	left: 0;
	color: #333;
	text-decoration: none
}

.landing .hero .button .changelog {
	left: auto;
	right: 0
}

.landing .hero .examples {
	margin-right: 32px;
	display: flex;
	flex-direction: column;
	align-items: center
}

.landing .hero .examples .menu {
	margin-top: 12px;
	display: flex;
	justify-content: center;
	align-items: center
}

.landing .hero .examples .menu button {
	background: 0 0;
	border: none;
	cursor: pointer
}

.landing .hero .examples .menu button i {
	font-size: 32px!important;
	color: #333
}

.landing .hero .examples .menu select {
	font-size: 18px
}

.landing .hero .examples .menu .select {
	margin: 0 16px;
	width: 200px
}

.landing .social {
	margin-top: 16px;
	padding: 9px 12px;
	border-radius: 6px;
	margin-right: 38px;
	text-align: center
}

.landing .social p {
	color: #444
}

.landing .social svg {
	font-size: 28px;
	margin: 0 12px 0 0;
	cursor: pointer;
	color: #949fad;
	pointer: cursor
}

.landing .social svg:hover {
	opacity: .8
}

.landing .social .fa-telegram {
	color: #08c
}

.landing .social .fa-youtube {
	color: red
}

.landing .social .fa-discord {
	color: #7289da
}

.landing .social .fa-twitter {
	color: #00acee
}

.landing .links {
	margin-top: 12px;
	margin-right: 38px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 18px
}

.landing .links a:hover {
	opacity: .9
}

.landing {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background: linear-gradient(168deg, #fff 800px, #f6f9fc 800px);
	padding-bottom: 32px
}

.landing .section {
	display: flex;
	max-width: 1100px;
	width: calc(100vw - 32px);
	justify-content: space-around;
	margin-top: 32px;
	background: #fff;
	color: #222;
	border-radius: 6px;
	border: 1px solid #efefef
}

.landing .section h1,
.landing .section h2 {
	font-weight: 300;
	margin: 0
}

.landing .section .block {
	flex: 1;
	padding: 18px 16px;
	margin: 12px;
	border-radius: 6px;
}

.landing .section .block td {
	width: 120px;
	line-height: 1.5
}

.landing .section .block td .sidenote {
	font-size: 75%;
	position: relative;
	top: -5px
}

.landing .section .block pre {
	white-space: pre-wrap;
	word-break: break-word
}

.landing ul {
	padding-inline-start: 22px
}

.landing i {
	max-width: calc(100vw - 64px);
	text-align: center;
	font-size: 14px
}

@media (max-width:1500px) {
	.landing .hero .examples .codeblock {
		min-width: auto
	}
}

@media (max-width:1200px) {
	.landing .hero {
		margin: 32px 0;
		flex-direction: column
	}
	.landing .hero .info {
		margin-bottom: 32px;
		text-align: center
	}
	.landing .hero .info .button {
		text-align: left
	}
	.landing .hero .info .button:last-child {
		margin-right: 0
	}
	.landing .hero .info .links,
	.landing .hero .info .social {
		margin-right: 0
	}
	.landing .hero .info .social {
		margin-top: 16px
	}
	.landing .hero .info .social i {
		font-size: 28px;
		margin-left: 6px;
		margin-right: 6px
	}
	.landing .hero .examples {
		margin: 0 8px 0 8px!important
	}
	.landing .editors {
		margin-right: 0
	}
}

@media (max-width:750px) {
	.landing .section {
		flex-direction: column
	}
}

.playground {
	display: flex;
	flex-direction: column
}

.playground .editor {
	display: flex;
	flex: 1
}

.playground .editor .codeblock,
.playground .editor .output {
	flex: 1;
	margin: 6px
}

.playground .select {
	margin-left: 8px;
	width: 220px
}

@media (max-width:1100px) {
	.playground .editor {
		flex-direction: column
	}
	.playground .editor .codeblock {
		max-width: calc(100vw - 36px)
	}
}

.editors-info {
	max-width: 600px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 32px
}

.editors-info h1 {
	font-weight: 300;
	margin: 0 0 0 -2px
}

.editors-info p {
	margin: 4px 0
}

.editors {
	display: flex;
	justify-content: space-evenly;
	width: calc(100vw - 32px);
	max-width: 600px;
	margin-top: 32px;
	margin-right: auto;
	margin-left: auto;
	flex-wrap: wrap
}

.editors .editor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #000;
	height: 100px;
	width: 125px;
	border: 1px solid #efefef;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	margin-bottom: 16px;
	transition: transform .1s, box-shadow .1s
}

.editors .editor:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 8px 0 rgba(0, 0, 0, .05), 0 16px 32px -2px rgba(0, 0, 0, .05)
}

.editors .editor img {
	flex: 0;
	height: 42px;
	margin-bottom: 6px
}

.built-in-v {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row dense;
	margin-top: 16px
}

.built-in-v .first,
.built-in-v .second {
	padding-bottom: 16px
}

.built-in-v .first {
	grid-column-start: 1;
	padding-right: 70px
}

.built-in-v .second {
	grid-column-start: 2
}

@media (max-width:750px) {
	.built-in-v {
		grid-template-columns: 1fr
	}
	.built-in-v .first,
	.built-in-v .second {
		grid-column-start: 1
	}
}

.landing .hero .button .options-container .options:focus, .landing .hero .button .options-container .options:hover {
    opacity: 1;
    pointer-events: all !important;
    transform: translateY(0)
}