:root {
  --palette-1: #7c7e63;
  --palette-2: #a0b0c8;
  --palette-3: #a170ad;
  --palette-4: #bcb87e;
  --palette-5: #a0b7d8;
}

@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wdth,wght@125,200..700&display=swap');

.mozilla-headline {
  font-family: "Mozilla Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
    background-color: var(--palette-5);
    font-family: "Mozilla Headline";
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    display: grid;
    justify-content: center;
    align-items: center;
}

p {
    font-variation-settings:
        "wdth" 100;
}

h1, h2 {
    font-variation-settings:
        "wdth" 125;
}