:root {
  --color-background: #fff;
  --color-text: #222;

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-serif: charter, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-monospace: Menlo, Monaco, "Courier New", Courier, monospace;

  --line-height-small: 1.3;
  --line-height-large: 1.75;

  --font-size-regular: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #222;
    --color-text: #fff;
  }
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);

  font-family: var(--font-family-serif);
  font-size: var(--font-size-regular);
  line-height: var(--line-height-large);
}

.container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.content {
  grid-column: 3/5;
  grid-row: 3/8;
}

.photo {
  grid-column: 5/7;
  grid-row: 1/9;
}

a {
  color: #61afef;
}

ul,
p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 3rem 0 1.38rem;
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-small);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {font-size: 2.441rem;}

h3 {font-size: 1.953rem;}

h4 {font-size: 1.563rem;}

h5 {font-size: 1.25rem;}

small {
  font-size: 0.8rem;
}

pre > code {
  font-family: var(--font-family-monospace);
}