@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: 14px;
    margin-bottom: 20px
}
pre, code {
    font-family: 'Monaco', 'Menlo', courier, monospace;
	font-weight: normal;
}
code span {
    transition: color 0.6s ease-in
}
code .red {
    color: #f50419
}
code .orange {
    color: #f57900
}
code .yellow {
    color: #f5e600
}
code .green {
    color: #00f50c
}
code .blue {
    color: #0081f5
}
code .indigo {
    color: #5000f5
}
code .violet {
    color: #9000f5
}
code .animate {
    color: #fff !important
}
pre {
    background: #010104
}
pre .comment {
    color: #747474
}
pre .keyword, pre .selector, pre .operator {
    color: #bc5cff
}
pre .storage, pre .support {
    color: #fb2639
}
pre .string {
    color: #fff55c
}
pre .constant {
    color: #ffad5c
}
pre .entity {
    color: #43a6ff
}
pre .inherited-class, pre .storage {
    font-style: italic
}
[data-language="custom"] .comment, .lang-custom .comment, .language-custom .comment {
    color: #314CAD
}
[data-language="custom"] .integer, .lang-custom .integer, .language-custom .integer {
    color: #f5e600
}
[data-language="custom"] .keyword, .lang-custom .keyword, .language-custom .keyword {
    color: #f57900
}
[data-language="html"] .attribute, .lang-html .attribute, .language-html .attribute {
    color: #fc4959
}