@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
  }
  
  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: #070707;
  }
  
  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
  }