html {
  font-size: 100%;/*16px*/
}

body {
  line-height: 1.5;
  letter-spacing: 0.12rem;
  word-spacing: 0.16rem;
  background-color: var(--background);
}

.text-formating-buttons {
  position: fixed;
  background-color: var(--background);
  padding: 1rem;
  width: 100%;
  border-bottom: 0.125rem solid var(--foreground);
}

button img {
  color: var(--foreground);
}

.text-formating-buttons button img {
  height: 2rem;
  width: 2rem;
}

.text-formating-buttons button {
  padding: 0.5rem;
  background-color: transparent;
}

.text-formating-buttons select {
  background-color: transparent;
  color: var(--foreground);
  height: 3rem;
}

.text-formating-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

select {
  font-size: 1rem;
}

option {
  background-color: var(--background);
  font-size: 1rem;
}

#text-editor {
  width: 100%;
  min-height: 100vh;
  height: fit-content;
  color: var(--foreground);
  margin: 0 auto;
  text-align: left;
  caret-color: var(--foreground);
  padding: 1rem;
  display: block !important;
  overflow-wrap: break-word;
}

[contenteditable] {
  outline: 0;
}

#text-editor div {
  align-items: flex-start;
  gap: 1rem;
}

#text-editor div+div {
  margin-top: 2rem;
}

#text-editor img+div {
  margin-top: 2rem;
}

#text-editor div+img {
  margin-top: 2rem;
}

#text-editor img+img {
  margin-top: 2rem;
}

#text-editor div img {
  width: 50%;
}

#text-editor img {
  margin-left: auto;
  object-fit: contain;
}

/* Inspirasjon for drop down pil https://stackoverflow.com/questions/14218307/select-arrow-style-change */
#font-select {
  appearance: none;
  background-image: url(../assets/arrow_drop_down.svg);
  background-repeat: no-repeat;
  background-position: right 0;
  padding-right: 3rem;
}

#style-select {
  appearance: none;
  background-image: url(../assets/arrow_drop_down.svg);
  background-repeat: no-repeat;
  background-position: right 0;
  padding-right: 3rem;
}

::-webkit-scrollbar {
  width: 0.375rem;
}

::-webkit-scrollbar-track {
  background: var(--background);
  height: 5rem;
}

::-webkit-scrollbar-thumb {
  background: var(--foreground);
  border-radius: 1.25rem;
}