* {
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  background: #f7f7f7;
  min-height: 100vh;
  width: 100%;
}

body {
  padding: 1rem;
  display: grid;
}

textarea {
  border: 1px solid #ececec;
  border-radius: 2px;
  color: #222222;
  margin: 0 auto;
  padding: 1rem;
  resize: none;
  width: 100%;
}

textarea:focus {
  outline: 1px solid #ececec;
}

@media (max-width: 500px) {
  body {
    padding: 0;
  }

  textarea {
    height: 100vh
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #24292d;
  }

  body textarea {
    border-color: #141418;
    background: #1d2026;
    color: #ffffff;
  }

  body textarea:focus {
    outline: none;
  }
}