:root {
  --color-brown: #6b1d1d;
  --color-gold: #d6aa72;
  --color-cream: #fdf3e7;
  --color-bg: #f8efe2;
  --color-panel: #fffaf4;
  --color-muted: #8a6d60;
}

html {
  background: var(--color-bg);
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
    linear-gradient(135deg, rgba(107, 29, 29, 0.02) 25%, transparent 25%),
    linear-gradient(225deg, rgba(107, 29, 29, 0.02) 25%, transparent 25%);
  background-position: 0 0, 0 0, 20px 20px;
  background-size: auto, 40px 40px, 40px 40px;
}

::selection {
  background: rgba(107, 29, 29, 0.16);
}

a,
button {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

[x-cloak] {
  display: none !important;
}