:root {
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text: #cdd6f4;
  --lavender: #b4befe;
  --blue: #89b4fa;
  --sapphire: #74c7ec;
  --sky: #89dceb;
  --teal: #94e2d5;
  --green: #a6e3a1;
  --yellow: #f9e2af;
  --peach: #fab387;
  --maroon: #eba0ac;
  --red: #f38ba8;
  --mauve: #cba6f7;
  --pink: #f5c2e7;
  --flamingo: #f2cdcd;
  --rosewater: #f5e0dc;
}

@font-face {
  font-family: 'Aleo';
  src: url('Aleo-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Aleo';
  src: url('Aleo-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Aleo';
  src: url('Aleo-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Aleo';
  src: url('Aleo-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Aleo', serif;
}

h2,
h3,
h4,
h5 {
  color: var(--subtext);
}


b,
strong {
  color: var(--rosewater);
}

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

a h1,
a h2,
a h3,
a h4,
a h5 {
  color: var(--pink);
}

html {
  color: var(--text);
  font-family: "Aleo", serif;
  font-size: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--base);
}

body {
  max-width: 800px;
  overflow-x: scroll;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  /* text-align: center; */
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: left;
  font-size: 1.2em;
  margin-bottom: 20px;
}

pre {
  overflow-x: scroll;
}

img {
  max-width: 80%;
}


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

.block h1 {
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

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

footer hr {
  width: 100%;
}