:root {
    --bg-color:  #CADBC0;
    --textnote-color:  #413620;
    --padding-large: 80px;
    --font: 'Lora', serif;
    --icon-color: #F5EBE0;
    --font-size: 22px;
}

html, body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:root[data-bs-theme="dark"] {
  --bs-body-bg: #141414;
}

#appTitle {
  padding-top: var(--padding-large);
  font-family: var(--font);
}

#topBar{
  padding-top: 30px;
}

#footer {
  font-family: var(--font);
  margin-top: auto;
  padding: 15px 0;
  position: relative;
}

.note-item{
    font-family: var(--font);
    border-bottom: 1px solid var(--textnote-color)!important;
    font-size: var(--font-size);
}

#txtNoteTitle{
  font-family: var(--font);
  font-size: var(--font-size);
}

#txtNoteBody{
  font-family: var(--font);
  font-size: var(--font-size);
  resize: none; /* Disable manual resize */
  flex: 1;
}

#editorBox {
  flex: 1 1 auto;
}

#editorBox {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100% !important;
  height: auto !important;
  flex: 1;
}

.icon-font {
  font-size: 25px;
  opacity: 0.5;
  color: var(--icon-color);
}

.icon-font:hover {
  opacity: 1;
}

#exportBox{
  padding-top: var(--padding-large);
}