import { css } from '../templater.js'

export default css`
:root {
  --color-bg: #d3b57e;
  --color-headings: #522c05;
  --color-body: #664405;
  --base-font-size: 2rem;
  --font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  color: var(--color-body);
  background: var(--color-bg);
  font-size: var(--base-font-size);
  font-family: var(--font-family);
}

p {
  font-size: var(--base-font-size);
}

h1 {
  font-size: calc(var(--base-font-size) * 3);
}

h2 {
  font-size: calc(var(--base-font-size) * 2);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  color: var(--color-headings);
}

section, header, footer {
  padding: 1rem;
  max-width: 900px;
  margin: auto;
}

section ul {
  margin-top: 1rem;
  margin-left: 3rem;
}
`