/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 30px;
  background: #e9dfcf;
  color: #263238;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
}

header {
  max-width: 1400px;
}

h1 {
  margin-top: 0;
  margin-bottom: 15px;

  font-size: 2.8rem;
  color: #263746;
  letter-spacing: -0.02em;
}

h2 {
  margin-top: 0;
  color: #263746;
}

hr {
  border: 0;
  border-top: 1px solid #b8aa95;
  margin: 20px 0 30px;
}

main {
  max-width: 1100px;
  margin: 0 auto;
}

/* Inspiration + submission area */
.hyperlinks {
  max-width: 900px;
  width: 100%;
  margin-bottom: 30px;
  box-sizing: border-box;
}

.hyperlinks p {
  margin: 18px 0 0;
}

.hyperlinks p a {
  color: #263746;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hyperlinks p a:hover {
  color: #4c4035;
}

/* FAQ / expandable-link area */
.links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.inspiration {
  white-space: pre;
}


.manyword {
  max-width: 900px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;

  padding: 20px;
  border: 1px dashed #b8aa95;

  box-sizing: border-box;
  counter-reset: word;
}

.manyword .word {
  width: 100%;
  box-sizing: border-box;
}

.word {
  max-width: 900px;
  padding: 28px;

  background: #eee5d6;

  border: 1px solid #b8aa95;
  border-radius: 10px;

  box-shadow: 2px 4px 10px rgba(60, 45, 30, 0.08);

  user-select: none;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.word:hover {
  transform: translateY(-2px);
  box-shadow: 3px 6px 14px rgba(60, 45, 30, 0.11);
}

.button {
  display: inline-block;
  padding: 10px 20px;

  border: 1px solid #b8aa95;
  border-radius: 6px;

  text-decoration: none;
  color: #263746;
  background: #f5eee3;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.button:hover {
  background: #eee5d6;
  transform: translateY(-2px);
  box-shadow: 0 3px 7px rgba(60, 45, 30, 0.08);
}

.button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.root-definition {
  margin: 4px 0 20px;
  color: #4c4035;
  font-size: 1.15rem;
  font-weight: normal;
}

.manyword .word h2::before {
  counter-increment: word;
  content: counter(word, decimal-leading-zero);
}

.words {
  counter-reset: word;
}

.word h2::before {
  content: counter(word, decimal-leading-zero);
  color: #8b7b68;
  font-family: Arial, sans-serif;
  font-size: 0.55em;
  font-weight: normal;
  letter-spacing: 2px;
  margin-right: 10px;
  vertical-align: 0.15em;
}

.word h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.8rem;
  color: #263746;
}

.word p {
  white-space: pre-line;
  margin: 0 0 20px 0;
}

.word br {
  display: block;
  line-height: 29px;
}

.word strong {
  color: #263746;
}

.word em {
  color: #4c4035;
}

.affixes {
  padding-top: 5px;
}

.affixes h3 {
  margin: 0 0 15px;
  font-size: 1.3rem;
  color: #263746;
}

.affix {
  display: flex;
  gap: 25px;
  padding: 13px 0;
  border-top: 1px solid #b8aa95;
}

.affix strong {
  min-width: 90px;
  color: #263746;
}

.affix span {
  color: #4c4035;
}