/** Dover Pottery Studio Theme Variables and Typography */

/** --- Color Variables --- */
:root {
  --color1: #d6af5c; /* Gold */
  --color2: #d7cdac; /* Light tan */
  --color3: #4f2829; /* Dark red/brown */
  --color4: #325260; /* Dark blue */
  --color5: #7f8b71; /* Sage green */
  --color6: #f8f0c6; /* Cream */
}

/** --- Typography and Animations --- */
.typed-out{
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(20, end) forwards;
  font-size: 1.6rem;
  width: 0;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

body {
  font-family: 'Lora', 'Times New Roman', serif;
  font-size: 18px;
  color: #404040;
  position: relative;
  background-color: var(--color6);
  {{ if .Site.Params.googlefonts }}font-family: {{ .Site.Params.googlefonts }};{{ end }}
}

p {
  line-height: 1.5;
  margin: 30px 0;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 42px;
  color: var(--color3);
  margin-top: 36px;
}

h2,h3,h4,h5,h6 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: var(--color4);
  margin-top: 24px;
}

h2.posts-subheading {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
}

h3 {
  font-size: 30px;
  color: var(--color4);
}

a {
  color: var(--color4);
}

a:hover,
a:focus {
  color: var(--color1);
}

blockquote {
  color: #808080;
  font-style: italic;
}

blockquote p:first-child {
  margin-top: 0;
}

hr.small {
  max-width: 100px;
  margin: 15px auto;
  border-width: 4px;
  border-color: inherit;
  border-radius: 3px;
}

hr.medium {
  max-width: 100%;
  margin: 25px 0px;
  border-width: 4px;
  border-color: var(--color2);
  border-radius: 0px;
}

/* Dark Mode Typography */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color3);
    color: var(--color2);
  }

  h1 {
    color: var(--color1);
  }

  h2, h3, h4, h5, h6 {
    color: var(--color2);
  }

  a {
    color: var(--color1);
  }

  a:hover, a:focus {
    color: var(--color2);
  }
}