html {
  background-color: #fff;
}
#notes2 {
  min-height: 100vh;
  display: grid;
  grid-template-areas: "tree crumbs" "tree name" "tree content" "tree blank";
  grid-template-columns: min-content 1fr;
}
@media only screen and (max-width: 600px) {
  #notes2 {
    grid-template-areas: "crumbs" "name" "content" "blank";
    grid-template-columns: 1fr;
  }
  #notes2 #tree {
    display: none;
  }
}
#tree {
  grid-area: tree;
  padding: 16px;
  background-color: #333;
  color: #ddd;
  z-index: 100;
}
#tree #logo {
  display: grid;
  position: relative;
  justify-items: center;
  margin-bottom: 32px;
  margin-left: 24px;
  margin-right: 24px;
}
#tree #logo img {
  width: 128px;
  left: -20px;
}
#tree .node {
  display: grid;
  grid-template-columns: 24px min-content;
  grid-template-rows: min-content 1fr;
  margin-top: 12px;
}
#tree .node .expand-toggle {
  user-select: none;
}
#tree .node .expand-toggle img {
  width: 16px;
  height: 16px;
}
#tree .node .name {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
#tree .node .name:hover {
  color: #fe5f55;
}
#tree .node .name.selected {
  color: #fe5f55;
  font-weight: bold;
}
#tree .node .children {
  padding-left: 24px;
  margin-left: 8px;
  border-left: 1px solid #444;
  grid-column: 1 / -1;
}
#tree .node .children.collapsed {
  display: none;
}
#crumbs {
  grid-area: crumbs;
  display: grid;
  justify-items: center;
  margin: 16px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #e4e4e4;
  color: #333;
  border-radius: 5px;
}
.crumbs.node-modified {
  background-color: #fe5f55;
  color: #efede8;
}
.crumbs.node-modified .crumb:after {
  color: #efede8;
}
.crumbs .crumb {
  margin-right: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.crumbs .crumb:after {
  content: "•";
  margin-left: 8px;
  color: #fe5f55;
}
.crumbs .crumb:last-child {
  margin-right: 0;
}
.crumbs .crumb:last-child:after {
  content: '';
  margin-left: 0px;
}
#name {
  color: #666;
  font-weight: bold;
  text-align: center;
  font-size: 1.15em;
  margin-top: 32px;
  margin-bottom: 16px;
}
/* ============================================================= *
 * Textarea replicates the height of an element expanding height *
 * ============================================================= */
.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
  grid-area: content;
  font-size: 1em;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  width: calc(100% - 32px);
  max-width: 900px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #f0f;
  background: rgba(0, 255, 255, 0.5);
  justify-self: center;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  padding: 0.5rem;
  font: inherit;
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}
/* ============================================================= */
#node-content {
  justify-self: center;
  word-wrap: break-word;
  font-family: monospace;
  color: #333;
  width: calc(100% - 32px);
  max-width: 900px;
  resize: none;
  border: none;
  outline: none;
}
#node-content:invalid {
  background: #f5f5f5;
  padding-top: 16px;
}
#blank {
  grid-area: blank;
  height: 32px;
}