@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    src:    url('font/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='19' specularConstant='1.9' specularExponent='20' lighting-color='%236d3b07' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='1'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23ffffffff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%236d3b07' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  font-family: 'Atkinson', 'Arial';
  font-size: 1.25rem;
  color: rgb(32, 32, 32);

  @media (min-width: 820px) {
    font-size: 1.5rem;
  }
}

a {
  color: #6D3B07;
}

header {
  padding-top: 3rem;
}

h1 {
  font-size: 2.5em;
  font-weight: 900;
  padding-top: 3rem;
  margin-top: 0;
}

h2 {
  padding-top: 2rem;
}

h3 {
  font-size: 1.5rem;
}

footer {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 1rem;
}