:root {
  --bg-content: white;
  --border-color: #ddd;
  --bg-body: #f5f5f5;
  --box-shadow: 5px 5px 5px #eee;
}
* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  background: var(--bg-body);
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}

#box {
  height: 300px;
  overflow-y: auto;
  padding: 15px;
  border: 2px var(--border-color) solid;
  background-color: var(--bg-content);
}



[contenteditable=true]:empty:not(:focus):before{
  content:attr(data-ph);
  color:grey;
  font-style:italic;
}

.btn-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 10px 0;
}

.btn {
  margin-right: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
      --bg-link: black;
      --border-color: #999;
      --bg-body: #d6d1cc;
      --bg-content: #dedad6;
      --box-shadow: 5px 5px 5px #ccc;
  }
  a {
      color: var(--bg-link);
  }
  html,img,video,iframe {
      filter: invert(1)
  }
}