/* --- Editor styles for gist-like page --- */
#editor-container {
  display: flex;
  width: 90vw;
  max-width: 1200px;
  height: 80vh;
  margin: 40px auto 20px auto;
  background: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 16px #0001;
  font-family: Consolas, Monaco, 'Lucida Console', monospace;
  line-height: 20px;
  overflow: hidden;
}

#line-numbers {
  background: #e0e0e0;
  color: #888;
  padding: 14px 0 12px 0;
  text-align: right;
  user-select: none;
  font-size: 14px;
  line-height: inherit;
  min-width: 35px;
  border-right: 1px solid #ddd;
  white-space: pre;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#line-numbers .line-number {
  padding-right: 8px;
  width: 100%;
}

#line-numbers .current-line {
  background: #d0d7de;
  color: #222;
  font-weight: bold;
}

/* #editor.current-line {
  background: #e3f2fd;
} */

#editor {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 12px;
  font-size: 16px;
  line-height: inherit;
  background: transparent;
  color: #222;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  caret-color: #1976d2;
}

#editor.current-line {
  background: #e3f2fd;
}

@media (max-width: 700px) {
  #editor-container {
    width: 98vw;
    height: 60vh;
    margin: 10px auto;
  }
  #editor {
    font-size: 14px;
    padding: 8px;
  }
  #line-numbers {
    font-size: 14px;
    padding: 8px 4px 8px 0;
    min-width: 28px;
  }
}

.other-web-sites {
  margin: 0;
  padding: 0;
  list-style: none;
  position: fixed;
  bottom: 0;
  left: 0;
  font-family: Helvetica;
  font-size: 0.8rem;
  background: white;

  opacity: 0.5;
  z-index: 1000;
}

.other-web-sites>li {
  display: inline-block;
  padding: 10px 10px;
  background: white;
}

.other-web-sites>li.current {
  background: #eee;
}

.other-web-sites a {
  text-decoration: none;
  color: #434343;
}

@media only screen and (max-width: 736px) {
  .other-web-sites {
    font-size: 0.5rem;
  }
}
/* --- Dark theme styles --- */
@media (prefers-color-scheme: dark) {
  body {
    background: #121314;
    color: #e0e0e0;
  }
  #editor-container {
    background: #181a1b;
    box-shadow: 0 2px 16px #0006;
    color: #e0e0e0;
  }
  #line-numbers {
    background: #23272b;
    color: #aaa;
    border-right: 1px solid #222;
  }
  #line-numbers .line-number {
    color: #aaa;
  }
  #line-numbers .current-line {
    background: #31363b;
    color: #fff;
  }
  #editor {
    background: transparent;
    color: #e0e0e0;
    caret-color: #90caf9;
  }
  #editor.current-line {
    background: #23272b;
  }
  .other-web-sites {
    background: #181a1b;
    color: #aaa;
  }
  .other-web-sites>li.current {
    background: #23272b;
  }
  .other-web-sites>li {
    background: #181a1b;
    color: #aaa;
  }
  .other-web-sites a {
    color: #90caf9;
  }
}