:root {
  --primary: #0ad;
  --secondary: #ad0;
  --accent: gold;
  --dark: #333;
  --light: #fafafa;
  --fg: var(--dark);
  --bg: var(--light);
  --bg-opaque: rgb(var(--light) / 0.75);

  --sans-serif: 'avenir next', avenir, sans-serif;
  --serif: baskerville, serif;
  --monospace: Consolas, monaco, monospace;
  --f-heading: var(--sans-serif);
  --f-body: var(--serif);

  --size: 16px;

  --box-padding: 1rem 2rem;
  --box-radius: 0.2rem;

  --button-padding: 0.3rem;
  --button-radius: 0.2rem;
  --button-shadow: -0.05rem 0.05rem 0 var(--dark);

  --animation-slow-pulse: 2.0s ease pulse infinite;
  --animation-fast-pulse: 0.4s ease pulse infinite;

  --xxxl: 11.391rem;
  --xxl: 7.594rem;
  --xl: 5.063rem;
  --l: 3.375rem;
  --m: 2.25rem;
  --s: 1.5rem;
  --xs: 1rem;
  --xxs: 0.667rem;
  --xxxs: 0.444rem;
}

/* reset */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  hyphens: auto;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0 0 1.6rem;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}
/* END reset */

html, body, header, main, footer {
  max-width: 100vw;
}

html {
  font-size: var(--size);
}

body {
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-heading);
  line-height: 1.2;
}

h1 {
  font-size: var(--m);
}

h2 {
  font-size: var(--m);
}

h3 {
  font-size: var(--s);
}

h4 {
  font-size: var(--xs);
}

@keyframes pulse {
  0%   { opacity: 1.0; }
  50%  { opacity: 0.4; }
  100% { opacity: 1.0; }
}

@view-transition {
  navigation: auto
}

@keyframes move-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes move-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

::view-transition-old(root) {
  animation: 0.3s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.3s ease-in both move-in;
}