@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=auto');

:root {
  --background-default: #FFFAFA;
  --background-light: #FAF0E6;

  --foreground-light: #121416;
  --foreground-default: #cccccc;
  --foreground-dark: #999999;

  --colour-1: #FFD966;
  --colour-1-light: #FFE699;
  --colour-2: #5CE58A;
  --colour-2-light: #85F2AA;
  --colour-3: #667FFF;
  --colour-3-light: #8C9FFF;
  --colour-4: #FF80AA;
  --colour-4-light: #FF99BB;

  --heading-typeface: 'Familjen Grotesk', sans-serif;

  --h1-text-size: 2rem;
  --h1-line-height: 120%;
  --h1-text-weight: 800;

  --h2-text-size: 1.5rem;
  --h2-line-height: 120%;
  --h2-text-weight: 700;

  --h3-text-size: 1.2rem;
  --h3-line-height: 130%;
  --h3-text-weight: 600;

  --default-typeface: 'Familjen Grotesk', sans-serif;
  --default-text-size: 20px;
  --body-line-height: 145%;
  --default-text-weight: 400;

  --introduction-typeface: 'Familjen Grotesk', serif;
  --introduction-text-size: var(--h2-text-size);
  --introduction-line-height: 140%;
  --introduction-text-color: #121416;

  --size-extra-small: 0.25rem;
  /* 5px */
  --size-small: 0.5rem;
  /* 10px */
  --size-medium: 1rem;
  /* 20px */
  --size-large: 2rem;
  /* 40px */
  --size-extra-large: 3rem;
  /* 60px */
  --size-extra-extra-large: 5rem;
  /* 100px */

  --container-padding: var(--size-large);
  --border-radius: var(--size-small);

  --body-width: 50rem;
}

* {
  margin: 0;
}

/* HTML elements */

html {
  font-family: var(--default-typeface);
  font-size: var(--default-text-size);
  color: var(--foreground-default);
  font-weight: var(--default-text-weight);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--background-default);
  max-width: var(--body-width);
  margin: 0 auto;
  padding: var(--size-large) var(--size-medium) var(--size-extra-extra-large) var(--size-medium);
}

h1 {
  font-family: var(--heading-typeface);
  font-size: var(--h1-text-size);
  line-height: var(--h1-line-height);
  font-weight: var(--h1-text-weight);
  color: var(--foreground-light);
}

h2 {
  font-family: var(--heading-typeface);
  font-size: var(--h2-text-size);
  line-height: var(--h2-line-height);
  font-weight: var(--h2-text-weight);
  color: var(--foreground-light);
}

h3 {
  font-family: var(--heading-typeface);
  font-family: var(--heading-typeface);
  font-size: var(--h3-text-size);
  line-height: var(--h3-line-height);
  font-weight: var(--h3-text-weight);
  color: var(--foreground-light);
}

p {
  line-height: var(--body-line-height);
  color: var(--foreground-light);
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

li {
  line-height: var(--body-line-height);
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-small);
}

nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

section {
  max-width: 100%;
  margin: var(--size-extra-extra-large) 0;
}

article>*+* {
  margin-top: var(--size-medium);
}

article>h1 {
  margin-top: var(--size-extra-extra-large);
}

article>h2 {
  margin-top: var(--size-extra-large);
}

article>h3 {
  margin-top: var(--size-medium);
}

article>img {
  max-width: 100%;
}

blockquote,
.container {
  display: flex;
  flex-direction: column;
  gap: var(--size-medium);
  padding: var(--container-padding);
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  align-items: flex-start;
}

.section-titles {
  margin-bottom: var(--size-large);
}

.section-titles>h3 {
  color: var(--foreground-dark);
  margin-top: var(--size-small);
}

.pill-list {
  display: flex;
  gap: var(--size-small);
  flex-wrap: wrap;
}

.list-pill {
  padding: var(--size-extra-small) var(--size-small);
  background-color: var(--background-light);
  border-radius: var(--border-radius);
}

.list-pill>.emoji {
  padding-right: var(--size-small);
  margin-right: var(--size-small);
  border-right: 1px solid var(--foreground-dark);
}

.introduction {
  display: flex;
  flex-direction: row;
  gap: var(--size-large);
  align-items: flex-start;
}

.introduction>p {
  font-family: var(--introduction-typeface);
  font-size: var(--introduction-text-size);
  line-height: var(--introduction-line-height);
  color: var(--introduction-text-color);
}

.introduction>img {
  border-radius: var(--border-radius);
  border: 2px solid var(--background-light);
}

.case-study-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-large);
  border-radius: var(--border-radius);
  padding: var(--container-padding);
}

.case-study-image {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.testimonial-text {
  color: var(--foreground-light);
}

.testimonial-author {
  color: var(--foreground-dark);
}

.image-background {
  background-color: var(--foreground-default);
  padding: var(--size-small);
  border-radius: var(--border-radius);
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--size-medium);
}

.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-medium);
}

.colour-1 {
  color: var(--colour-1);
  text-decoration: none;
}

.colour-2 {
  color: var(--colour-2);
}

.colour-3 {
  color: var(--colour-3);
}

.colour-4 {
  color: var(--colour-4);
}

.background-colour-1 {
  background-color: var(--colour-1);
}

.background-colour-2 {
  background-color: var(--colour-2);
}

.background-colour-3 {
  background-color: var(--colour-3);
}

.background-colour-4 {
  background-color: var(--colour-4);
}

.background-colour-1 *,
.background-colour-2 *,
.background-colour-3 *,
.background-colour-4 * {
  color: var(--background-default);
}

@media (max-width: 30rem) {
  .introduction {
    flex-direction: column;
    gap: var(--size-large);
  }

  .two-column-grid {
    grid-template-columns: 1fr;
  }
}