.editor-shell {

  flex: 1;

  display: flex;
  justify-content: center;

  overflow: hidden;

  position: relative;

}

/* =========================
   EDITOR
========================= */

.editor {

  width: 100%;
  max-width: var(--writing-width);

  height: 100%;

  border: none;
  outline: none;

  resize: none;

  background: transparent;

  color:
    var(--text);

  padding:
    28px 30px 34px;

  font-size:
    var(--font-size);

  line-height:
    var(--line-height);

  font-family:
    "Courier New",
    Consolas,
    monospace;

  caret-color:
    var(--text);

  overflow-y: auto;

  white-space: pre-wrap;

  overflow-wrap: break-word;

  tab-size: 4;

}

/* =========================
   PLACEHOLDER
========================= */

.editor::placeholder {

  color:
    rgba(255,255,255,0.14);

}

/* =========================
   FOCUS
========================= */

.editor:focus {

  outline: none;

}

/* =========================
   SELECTION
========================= */

.editor::selection {

  background:
    rgba(255,255,255,0.14);

}

/* =========================
   FADE EDGES
========================= */

.editor-shell::before,
.editor-shell::after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;
  height: 22px;

  pointer-events: none;

  z-index: 3;

}

.editor-shell::before {

  top: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.18),
      transparent
    );

}

.editor-shell::after {

  bottom: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.18),
      transparent
    );

}

/* =========================
   TYPEWRITER FEEL
========================= */

.editor {

  text-rendering:
    optimizeLegibility;

  font-kerning:
    normal;

}

/* =========================
   SCROLLBAR
========================= */

.editor::-webkit-scrollbar {

  width: 10px;

}

.editor::-webkit-scrollbar-track {

  background:
    transparent;

}

.editor::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,0.08);

}

.editor::-webkit-scrollbar-thumb:hover {

  background:
    rgba(255,255,255,0.14);

}

/* =========================
   ACTIVE WINDOW EDITOR
========================= */

.project-window.active-window .editor {

  color:
    var(--text);

}

/* =========================
   LOW EFFECTS MODE
========================= */

body.no-effects .editor-shell::before,
body.no-effects .editor-shell::after {

  display: none;

}

/* =========================
   MOBILE SAFETY
========================= */

@media (max-width: 900px) {

  .editor {

    padding:
      22px 20px 28px;

  }

}