*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  font-size: 1.4em;
  line-height: 1.2em;
  font-style: normal;
  font-weight: normal;
  font-family: "Tuers-Caslon-Italic-Regular", serif;
  margin-bottom: 0px;
}

.headlines {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: editorFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) both;


}

h1+h1 {
  margin-top: 0;
}

h1:has(+ h1) {
  margin-bottom: 0;
}

:root {
  --color-text-color: rgb(43, 44, 43);
  --color-background-color: #fff;
}

::selection {
  color: #fff;
  background: rgb(43, 44, 43);
}

@font-face {
  font-family: Tuers-Caslon-Roman-Regular;
  src: url(../fonts/Tuers-Caslon_Long-Primer-OS_Roman.otf);
  unicode-range: U+0-10FFFF;
}

@font-face {
  font-family: Tuers-Caslon-Italic-Regular;
  src: url(../fonts/Tuers-Caslon_Long-Primer-OS_Italic.otf);
  unicode-range: U+0-10FFFF;
}

@font-face {
  font-family: Tuers-Caslon-Roman-Reversed;
  src: url(../fonts/Tuers-Caslon_Long-Primer-OS_Roman-Reversed.otf);
  unicode-range: U+0-10FFFF;
}

@font-face {
  font-family: Tuers-Caslon-Italic-Reversed;
  src: url(../fonts/Tuers-Caslon_Long-Primer-OS_Italic-Reversed.otf);
  unicode-range: U+0-10FFFF;
}


@font-face {
  font-family: Switzer-Regular;
  src: url(../fonts/Switzer-Regular.ttf);
}

@font-face {
  font-family: Switzer-Medium;
  src: url(../fonts/Switzer-Medium.ttf);
}

@font-face {
  font-family: Switzer-MediumItalic;
  src: url(../fonts/Switzer-MediumItalic.ttf);
}

.hidden {
  display: none !important;
}

html {
  height: 100%;
  min-height: 100vh;
}


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 32px;
  padding-top: 200px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
  font-family: Switzer-Medium, sans-serif;
  font-size: 15px;
  z-index: 0;
  pointer-events: none;


}

.buttons {
  display: none;
  gap: 8px;
  z-index: 100;
}

.buttons.is-visible {
  display: flex;
  animation: editorFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

button {
  background-color: var(--color-background-color);
  color: var(--color-text-color);
  border: 1.4px solid var(--color-text-color);
  border-radius: 2px;
  font-family: Switzer-Medium, sans-serif;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  transition: 0.15s;
  font-size: 14px;
}

button:hover {
  background-color: var(--color-text-color);
  color: var(--color-background-color);
  transition: 0.2s;
}

#italic-button {
  font-family: Switzer-MediumItalic, sans-serif;
}

a {
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: 0.175s;
}

a:hover {
  text-underline-offset: 4px;
  transition: 0.275s;
}

.icon-in-line {
  display: inline-flex;
  gap: 6px;
  align-items: center;

}

.icon-in-line img {
  width: 26px;
}

.icon-in-line img:hover {
  transform: scaleX(-1);
}


body {
  margin: 0;
  font-family: Tuers-Caslon-Roman-Regular;
  font-size: 21px;
  line-height: 1.6;
  background: var(--color-background-color);
  color: var(--color-text-color);
  align-items: center;
  min-height: 100vh;
}

body .reversed {
  font-family: Tuers-Caslon-Roman-Reversed;
}

.manual-reversed {
  transform: scaleX(-1) !important;
  font-family: Tuers-Caslon-Roman-Reversed;
}

.manual-reversed-italic {
  transform: scaleX(-1) !important;
  font-family: Tuers-Caslon-Italic-Reversed;
}

em {
  font-family: Tuers-Caslon-Italic-Regular;
  font-style: normal;
}

.reversed em {
  font-family: Tuers-Caslon-Italic-Reversed;
}

main {
  display: flex;
  justify-content: center;
  padding: 30px;
  min-height: 100vh;
}

.editor {
  width: 100%;
  max-width: 700px;
  font-size: 26px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  row-gap: 0;
  align-items: center;
  padding-top: 160px;
  padding-bottom: 100px;
  animation: editorFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.editor.is-intro-pending {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.editor.is-intro-pending .headlines {
  animation: none;
}

p {
  margin: 0;
}



p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.asterisks {
  line-height: 0.7;
  text-align: center;
}

#preview {
  width: 100%;
  font: inherit;
  cursor: text;
  outline: none;
  margin: 32px 0px 60px;
  overflow: visible;
}

@keyframes editorFadeIn {
  from {
    opacity: 0;
    transform: translateY(64px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


#preview:focus {
  border-color: #555;
}

/* Each line occupies its own block; pre-wrap preserves spaces for cursor tracking */
#preview span {
  display: block;
  white-space: pre-wrap;
  line-height: inherit;
  max-height: 1lh;
  overflow-y: hidden;
}

#preview span.para-end {
  text-align-last: left;
}

/* Reversed (RTL) lines: mirror the entire line horizontally */
#preview span.reversed {
  transform: scaleX(-1);
}

.intro-typewriter-trailing::after {
  content: attr(data-intro-trailing);
  font-family: Tuers-Caslon-Roman-Regular;
}



/* First line of each paragraph gets the paragraph symbol prepended */
#preview span.para-start::before {
  content: var(--para-symbol);
}


@media (max-width: 800px) {

  h1 {
    font-size: 1.8em;
    line-height: 1em;
  }

  p,
  .editor {
    font-size: 20px;
  }

  .editor {
    padding-top: 70px;
  }

  footer p {
    font-size: 14px;
  }

}