/* the colours, type and shapes every dnd page shares; the tool pages build it into style.css, the blog into its frame sheet */

:root {
  --background: linear-gradient(135deg, rgb(34, 33, 33) 0%, rgb(28, 27, 27) 100%);
  --surface: linear-gradient(145deg, #3a3838, #2f2d2d);
  --surface-flat: #353333;
  --field: #262525;
  --text: white;
  --text-soft: rgba(255, 255, 255, 0.85);
  --muted: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  --radius: 1.5em;
  --radius-small: 0.5em;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    sans-serif;
}
/* the shared dark page over alchemy's style, with posts on a light paper card for reading */

/* below the footer on a short page, so the dark runs to the bottom of the window */
html {
  background: var(--background);
}

body {
  background: var(--background);
  background-attachment: fixed;
}

/* the header and footer line up with the card */
body > .container,
.header .container,
.footer .container {
  max-width: 780px;
}

body > .container {
  padding: 1.5em 2.5em 2.5em;
  border-radius: var(--radius);
  background: #eceae6;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  color: #2a2828;
}

h1,
h2,
h3,
h4,
h5,
h6,
.post.mini-post .post-date {
  font-family: var(--font);
  font-weight: 300;
}

a:hover {
  color: #555;
}

.post {
  font-size: 17.5px;
  line-height: 1.65;
}

/* about 70 characters a line */
.post .post-content {
  max-width: 68ch;
}

.post.mini-post {
  border-bottom: 1px solid #d6d3ce;
  font-size: 16px;
}

.header {
  padding: 1.5em 0 1em;
  border: 0;
  background: none;
}

.header a,
.header .muted {
  color: var(--text);
}

.header a:hover {
  color: var(--text-soft);
}

.header .header-name {
  font-size: 56px;
  letter-spacing: 0.05em;
  text-shadow: var(--text-shadow);
}

.header .header-text {
  color: var(--muted);
  font-size: 18px;
}

.header .header-menu {
  font-family: var(--font);
}

.footer {
  margin-top: 2em;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
}

.footer a {
  color: var(--muted);
}

.footer a:hover {
  color: var(--text-soft);
}

.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > span {
  border-color: #d6d3ce;
  color: #555;
}