@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lato-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --snow-white: #F2F0E9;
  --orange-coloured-white: #E8E1C9;
  --skimmed-milk-white: #D9D5C4;
  --ash-grey: #B7B8A4;
  --broccoli-brown: #5C5850;
  --ultramarine-blue: #4C6FA5;
  --imperial-purple: #33355C;
  --scotch-blue: #1E2038;
  --emerald-green: #5B9A73;
  --verdigris-green: #2E6E52;
  --sap-green: #5C6640;
  --duck-green: #193A2E;
  --dutch-orange: #E8A13C;
  --lake-red: #9A1F4A;
  --crimson-red: #7A5560;
  --deep-reddish-brown: #3E2A28;
}

body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  max-width: 32rem;
  margin: 3rem auto;
  padding: 0 1rem;
  color: var(--deep-reddish-brown);
  background: var(--snow-white);
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ultramarine-blue);
}