body {
	background: #2b2b2b;
	min-height: 1200px;
	padding: 3% 4%;
	margin: 0;
	font-size: 1.4em;
  line-height: 116%;
	-webkit-print-color-adjust: exact !important;
	color-adjust: exact !important;
  transition: background ease-in-out 0.6s, opacity ease-in 0.2s;
  opacity: 1;
	font-family: 'Inconsolata', monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 1px;
  color: #eee;
}

body.loading * {
  opacity: 0;
  color: transparent;
}

pre {
	color: #434343;
  transition: color ease-in 1.4s;
}

pre span {
  white-space: pre-line;
}

.link {
	text-decoration: none;
	color: #0cc391;
	font-size: .76em;
}

.key {
	color: #A0D083;
}

.string {
	color: #0cc391;
}

.number {
	color: #ff7252;
	font-size: .76em;
}

.boolean {
	color: #939ca0;
	font-size: .76em;
}

.null {
	color: #9c27b0;
	font-size: .76em;
}

/* white mode */
.btn {
  background-color: white;
  width: 48px;
  height: 48px;
  position: absolute;
  cursor: pointer;
  border-radius: 14px;
  transition: all ease-in-out 0.6s;
}

#toggler {
  top: 8px;
  right: 8px;
}

#print {
  top: 8px;
  right: 68px;
  background-color: transparent;
}

#print svg {
  width: 48px;
  height: 48px;
  fill: #eee;
}

.white .btn {
	background-color: #2b2b2b;
}

.white #print svg {
  fill: #2b2b2b;
}

.white pre {
  color: #eee;
}

body.white {
  background: white;
}

@media print {
  .btn {
    display: none;
  }

  pre {
    color: #fefefe;
  }

  .key,
  .link,
  .string {
    filter: brightness(0.7)
  }

  pre {
    color: #f7f7f7;
  }
}