:root {
  line-height: 1.4;
  color-scheme: light dark;
  --rosewater: light-dark(#dc8a78, #f5e0dc);
  --flamingo: light-dark(#dd7878, #f2cdcd);
  --pink: light-dark(#ea76cb, #f5c2e7);
  --mauve: light-dark(#8839ef, #cba6f7);
  --red: light-dark(#d20f39, #f38ba8);
  --maroon: light-dark(#e64553, #eba0ac);
  --peach: light-dark(#fe640b, #fab387);
  --yellow: light-dark(#df8e1d, #f9e2af);
  --green: light-dark(#40a02b, #a6e3a1);
  --teal: light-dark(#179299, #94e2d5);
  --sky: light-dark(#04a5e5, #89dceb);
  --sapphire: light-dark(#209fb5, #74c7ec);
  --blue: light-dark(#1e66f5, #89b4fa);
  --lavender: light-dark(#7287fd, #b4befe);
  --text: light-dark(#4c4f69, #bac2de);
  --subtext1: light-dark(#5c5f77, #a6adc8);
  --subtext0: light-dark(#6c6f85, #cdd6f4);
  --overlay2: light-dark(#7c7f93, #9399b2);
  --overlay1: light-dark(#8c8fa1, #7f849c);
  --overlay0: light-dark(#9ca0b0, #6c7086);
  --surface2: light-dark(#acb0be, #585b70);
  --surface1: light-dark(#bcc0cc, #45475a);
  --surface0: light-dark(#ccd0da, #313244);
  --base: light-dark(#eff1f5, #1e1e2e);
  --mantle: light-dark(#e6e9ef, #181825);
  --crust: light-dark(#dce0e8, #11111b);
}

math {
  color: color-mix(in oklab, var(--blue), var(--subtext1));
}

a {
  color: var(--mauve);
}

html {
  color: var(--text);
  font-family: "Georgia", serif;
  font-size: 1.2rem;
  line-height: 1.5;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--base);
}

img {
 width: min(650px, 100%);
}

body {
  width: min(650px, 100%);
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.site-title {
  font-family: "Avenir Next", "Avenir", "Helvetica", sans-serif;
  font-size: 3.5rem;
  margin-bottom: 10px;
  text-align: center;
}

nav {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

nav > ul {
  font-family: "Avenir Next", "Avenir", "Helvetica", sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 0;
}

.block {
  border: 1px dotted white;
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Avenir Next", "Avenir", "Helvetica", sans-serif;
}

.block h1 {
  font-family: "Avenir Next", "Avenir", "Helvetica", sans-serif;
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

.wave {
  background: #111;
  color: #fff;
  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer hr {
  width: 100%;
}