:root {
  --bg-color: #212221;
  --fg-color: #c2c2c2;
  --v-margin: 20px;
  --h-margin: 40px;
  --icon-size: 30px;
}
@media (max-width: 500px) {
  :root {
    --v-margin: 20px;
    --h-margin: 15px;
    --icon-size: 25px;
  }
  .header > .actions {
    gap: 4px;
  }
}
* {
  font-family: monospace;
  font-size: 14px;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--bg-color);
  color: var(--fg-color);
  margin: var(--v-margin) var(--h-margin);
  width: calc(100% - 2 * var(--h-margin));
  height: calc(100% - 2 * var(--v-margin));
}
body.light {
  --bg-color: #eaeaea;
  --fg-color: #474747;
}
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  margin: 14px 0 40px;
  display: flex;
}
.main {
  text-align: center;
  flex: auto;
}
.actions {
  display: flex;
  gap: 12px;
}
.icon {
  height: var(--icon-size);
  width: var(--icon-size);
  cursor: pointer;
}
.icon.github {
  mask: url("/cli-er/assets/github.svg") no-repeat center;
  mask-size: contain;
  background: var(--fg-color);
}
.icon.theme {
  mask: url("/cli-er/assets/theme.svg") no-repeat center;
  mask-size: contain;
  background: var(--fg-color);
}
.title {
  font-size: 17px;
  margin-top: 0;
}
.title > span {
  font-size: inherit;
  font-weight: bolder;
}
.hint {
  font-size: 14px;
}
.hint > span {
  font-size: inherit;
  font-style: italic;
}
#shell {
  flex-grow: 1;
  overflow-y: auto;
}
#shell::-webkit-scrollbar {
  width: 9px;
  height: 12px;
}
#shell::-webkit-scrollbar-track {
  background: transparent;
}
#shell::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 3px solid transparent;
}
#shell::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-bottom: 4px;
}
.input-wrapper > span {
  white-space: pre;
}
#sprompt.executing {
  display: none;
}
#input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  color: var(--fg-color);
}
pre {
  margin: 6px 0;
  white-space: pre-wrap;
}
pre[data-id] {
  margin-bottom: 0;
}
#output > pre > span.error {
  color: #d96464;
}
/* output colors */
span.color-31 {
  color: #d64545;
}
span.color-32 {
  color: #65b265;
}
span.color-33 {
  color: #cbcb56;
}
span.color-34 {
  color: #4a80e4;
}
span.color-35 {
  color: #9f289f;
}
span.color-36 {
  color: #51c9c9;
}
span.color-37 {
  color: white;
}
/* color modes */
span.color-mode-0 {
  font-weight: bold;
}
span.color-mode-4 {
  text-decoration: underline;
}