.notebook-page {
  display: flex;
  flex-flow: column nowrap;
  padding: clamp(1rem, 3vw, 2rem) 0;
  background: #fff;
  border: 1px solid #cacaca;
  box-shadow: 1px 1px 0 0 #ebebeb, 1px 1px 0 1px #bebebe, 2px 2px 0 1px #ebebeb,
    2px 2px 0 2px #bebebe, 3px 3px 0 2px #ebebeb, 3px 3px 0 3px #bebebe;
}

.notebook-page--mirror {
  box-shadow: -1px 1px 0 0 #ebebeb, -1px 1px 0 1px #bebebe,
    -2px 2px 0 1px #ebebeb, -2px 2px 0 2px #bebebe, -3px 3px 0 2px #ebebeb,
    -3px 3px 0 3px #bebebe;
}

@media screen and (max-width: 1023px) {
  .notebook-page {
    grid-column: 1/-1;
  }
  .notebook-page--mirror {
    display: none;
  }
}

.notebook-page__header,
.notebook-page__footer,
.notebook-page__content {
  padding: 0 3rem 0 2rem;
}

.notebook-page__title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0 0;
}

.notebook-page__title .form__input {
  border: none;
  font-weight: inherit;
  padding: 0;
  width: 100%;
}

.notebook-page__title .form__input:focus {
  outline: none;
}

.notebook-page__content {
  flex: 1;
  display: flex;
  margin: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 3vw, 3rem);
  white-space: pre-wrap;
  word-break: break-all;
  hyphens: auto;
}

.notebook-page__content .form__textarea {
  border: none;
  line-height: inherit;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.notebook-page__content .form__textarea:focus {
  outline: none;
  resize: none;
}

.notebook-page__footer {
  text-align: right;
}

.notebook-page__toolbar {
  display: flex;
  flex-flow: row;
  gap: 1rem;
  position: absolute;
  top: -4rem;
  right: 1rem;
}