@keyframes fade-in {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fade {
	10% {
		transform: scale(1, 1)
	}

	35% {
		transform: scale(1, 1.7)
	}

	40% {
		transform: scale(1, 1.7)
	}

	50% {
		opacity: 1
	}

	60% {
		transform: scale(1, 1)
	}

	100% {
		transform: scale(1, 1);
		opacity: 0
	}
}

[data-language] code,
[class^="lang"] code,
pre [data-language],
pre [class^="lang"] {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	animation: fade-in 50ms ease-in-out 2s forwards
}

[data-language] code.rainbow,
[class^="lang"] code.rainbow,
pre [data-language].rainbow,
pre [class^="lang"].rainbow {
	animation: none;
	transition: opacity 50ms ease-in-out
}

[data-language] code.loading,
[class^="lang"] code.loading,
pre [data-language].loading,
pre [class^="lang"].loading {
	animation: none
}

[data-language] code.rainbow-show,
[class^="lang"] code.rainbow-show,
pre [data-language].rainbow-show,
pre [class^="lang"].rainbow-show {
	opacity: 1
}

pre {
	position: relative
}

pre.loading .preloader div {
	animation-play-state: running
}

pre.loading .preloader div:nth-of-type(1) {
	background: #0081f5;
	animation: fade 1.5s 300ms linear infinite
}

pre.loading .preloader div:nth-of-type(2) {
	background: #5000f5;
	animation: fade 1.5s 438ms linear infinite
}

pre.loading .preloader div:nth-of-type(3) {
	background: #9000f5;
	animation: fade 1.5s 577ms linear infinite
}

pre.loading .preloader div:nth-of-type(4) {
	background: #f50419;
	animation: fade 1.5s 715ms linear infinite
}

pre.loading .preloader div:nth-of-type(5) {
	background: #f57900;
	animation: fade 1.5s 853ms linear infinite
}

pre.loading .preloader div:nth-of-type(6) {
	background: #f5e600;
	animation: fade 1.5s 992ms linear infinite
}

pre.loading .preloader div:nth-of-type(7) {
	background: #00f50c;
	animation: fade 1.5s 1130ms linear infinite
}

pre .preloader {
	position: absolute;
	top: 12px;
	left: 10px
}

pre .preloader div {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	display: inline-block;
	margin-right: 4px;
	opacity: 0;
	animation-play-state: paused;
	animation-fill-mode: forwards
}

pre {
	background-color: #000;
	word-wrap: break-word;
	margin: 0px;
	padding: 10px;
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px
}

pre,
code {
	padding: 10px 50px;
	font-size: 16px;
	font-family: 'Monaco', 'Menlo', courier, monospace
}

@font-face {
	font-family: "Fira Code";
	src: url("/fonts/Fira_Code/static/FiraCode-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Fira Code";
	src: url("/fonts/Fira_Code/static/FiraCode-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Fira Code";
	src: url("/fonts/Fira_Code/static/FiraCode-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Fira Code";
	src: url("/fonts/Fira_Code/static/FiraCode-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Fira Code";
	src: url("/fonts/Fira_Code/static/FiraCode-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

code,
pre {
	font-family: "Fira Code", monospace;
	font-weight: 400;
	line-height: 2;
}

pre {
	background: #272822
}

pre .comment {
	color: #75715E
}

pre .constant {
	color: #AE81FF
}

pre .storage {
	color: #66D9EF;
	font-style: italic
}

pre .string,
pre .comment.docstring {
	color: #E6DB74
}

pre .support.tag {
	color: #fff
}

pre .keyword {
	color: #F92672
}

pre .selector,
pre .storage.modifier.extends {
	color: #F92672
}

pre .inherited-class {
	font-style: italic
}

pre .operator,
pre .support.tag-name,
pre .entity.tag {
	color: #F92672
}

pre .entity,
pre .support.attribute,
pre .entity.attribute {
	color: #A6E22E
}

pre .entity.name.type,
pre .entity.name.struct {
	color: #fff
}

pre .support,
pre *[data-language="c"] .function.call {
	color: #66D9EF
}

pre .css-property,
pre .storage.function {
	font-style: italic
}

pre .variable.global,
pre .variable.class,
pre .variable.instance {
	color: #A6E22E
}

[data-language="html"] .support.operator,
.lang-html .support.operator,
.language-html .support.operator {
	color: #fff
}

[data-language="javascript"] .variable.super,
.lang-javascript .variable.super,
.language-javascript .variable.super {
	color: #66D9EF
}

[data-language="js"] .variable.super,
.lang-js .variable.super,
.language-js .variable.super {
	color: #66D9EF
}