html, body {
  padding: 0;
  margin: 0;
	line-height: 140%;
}

#top {
	display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

	background-color: #ffcc66;
	border-bottom: 2px solid;

  padding-top: 12px;
  padding-left: 20px;
  padding-bottom: 12px;
	margin-bottom: 10px;

  align-items: center;
  row-gap: 15px;
  column-gap: 25px;
}

#main {
	display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  margin-left: 50px;
  margin-bottom: 50px;
}

#left {
  max-width: 650px;
  margin-right: 50px;
}

#box {
	background-color: #bae3ff;
  display: box;
	overflow: auto;
	border-style: solid;
	border-radius: 10px;
  padding: 10px;
	padding-left: 20px;
	padding-right: 25px;
	margin-top: 20px;
	margin-bottom: 5px;
}

table, th, td {
  border: 1px solid #999999;
  border-collapse: collapse;
  padding: 5px;
}

pre {
	background-color: #ccffcc;
	border: 1px solid #999999;
	display: block;
	padding: 20px;
  tab-size: 2;
}

.input {
	background-color: #f5fffa;
}
[data-darkreader-mode="dynamic"] .input {
	background-color: #0d1117;
}

.output {
	background-color: #ffcc66;
}

.example {
  display: inline-block;
  padding: 1em;
}

@media (max-width: 700px) {
	body {
		padding-bottom: 10px;
	}

  #main {
    padding: 0;
		padding-left: 8px;
		padding-right: 8px;
    margin: 0;
  }

  #left {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  pre {
    overflow-x: auto;
    font-size: 125%;
  }

  code {
    font-size: 125%;
  }

  #box {
    margin: 0;
  }
}

/* light mode */
.hljs-built_in {
  color: #990099;
}
.hljs-keyword {
  color: #006699;
}
.hljs-literal {
  color: #009966;
}
.hljs-built_in, .hljs-keyword, .hljs-literal {
  font-weight: bold;
}
.hljs-comment {
  color: #990033;
}
.hljs-string {
  color: #cc6600;
}

/* dark mode */
[data-darkreader-mode="dynamic"] .hljs-built_in {
  color: #ffa657;
}
[data-darkreader-mode="dynamic"] .hljs-keyword {
  color: #ff7b72;
}
[data-darkreader-mode="dynamic"] .hljs-literal {
  color: #79c0ff;
}
[data-darkreader-mode="dynamic"] .hljs-built_in,
[data-darkreader-mode="dynamic"] .hljs-keyword,
[data-darkreader-mode="dynamic"] .hljs-literal {
  font-weight: bold;
}
[data-darkreader-mode="dynamic"] .hljs-comment {
  color: #8b949e;
}
[data-darkreader-mode="dynamic"] .hljs-string {
  color: #a5d6ff;
}