main {
  max-width: 800px;
  color: #222;
  margin: 24px auto;
}

@media only screen and (max-width: 824px) {
  main {
    width: calc(100% - 24px);
    margin: 24px 12px;
  }

  iframe {
    width: 90vw;
    height: 56vw;
  }

  .preWrapper {
    width: 100%;
  }

  pre {
    width: 100%;
    overflow-x: auto;
  }
}

input, textarea {
  width: 100%;
}

h2 {
  border-bottom: 1px solid #222;
  margin-top: 32px;
  padding-bottom: 6px;
}

h2:first-child {
  margin-top: 8px;
}

h3 {
  margin-top: 28px;
  font-weight: normal;
}

a {
  font-weight: bold;
}

input {
  border: 0;
}

.liveEditorContainer {
  width: 100%;
  min-height: 380px;
  height: 40vh;
}

.liveEditorContainer iframe {
  height: 100%;
  width: 100%;
}

.picture {
  height: 250px;
  width: 250px;
}

.themed {
  border-radius: 6px;
  margin-bottom: 24px;
  padding: 8px 12px;
}

.searchBlock {
  flex-drection: row;
  align-items: center;
  display: flex;
}

.searchBlock .searchButton {
  height: 36px;
  line-height: 18px;
}

.color.themed {
  --block-accent-color: #3a5ec5;
  background: #abcdef;
}

.dark.themed {
  --block-text-color: #f8f8f8;
  --block-background-color: #222;
  --block-accent-color: #f2d12e;
  --block-shadow-color: #555;
  background: #444;
}

.dark.themed input {
  color: var(--block-text-color);
  background: var(--block-background-color);
}

/*# sourceMappingURL=index.2d55f52b.css.map */