@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;1,9..40,400;1,9..40,700&family=DM+Serif+Display&display=swap');

:root {
  --c-primary: #00b2de;
  --c-dark: #004f95;
  --c-light: #f0f4ff;
}

body {
  font-family: 'DM Sans', sans-serif;
  padding: 48px 24px;
  font-size: 1rem;
}

pre, code, .code {
  font-family: 'DM Mono', monospace;
}

h1, h2, h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: normal;
}

h1 { font-size: 4rem; margin-top: 0; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.7rem; }

a[href] {
  text-decoration: none;
  margin: -4px;
  padding: 4px;
  font-weight: bold;
  color: var(--c-dark);
}

a[href]:hover {
  background-color: var(--c-primary);
  color: black;
}

@media screen and (min-width: 800px) {
  body {
    padding: 48px 20vw;
  }
}