@font-face {
  font-family: "Kalam";
  src: url("https://cdn.fasu.dev/fonts/ofl/kalam/kalam-normal-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("https://cdn.fasu.dev/fonts/ofl/kalam/kalam-normal-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("https://cdn.fasu.dev/fonts/ofl/kalam/kalam-normal-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --page-bg: #f8f5ee;
  --paper: #fffdf8;
  --line: #d8d2c4;
  --accent: #b8b082;
  --accent-dark: #817a51;
  --text: #5f5a4f;
  --heading: #746e60;
  --muted: #989183;
  --max-width: 1320px;
  --content-width: 860px;
  --font-main: "Kalam", "Segoe Print", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
}
.skip-link:focus { top: 1rem; }

h1, h2, h3, h4, p { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  body { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}