* {
  font-family: 'Karla', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

:root {
  scroll-behavior: smooth;
  font-size: 16px;

  /* Primary */
  --cyan: #2ab3b1;
  --green: #c0df33;

  /* Neutral */
  --gray: #9aa7be;
  --light-gray: #e6eff5;

  /* Typography */
  --h1: 1.5rem;
  --h1-letter-spacing: -0.3px;

  --h2: 1.125rem;
  --h2-line-height: 20px;
  --h2-letter-spacing: -0.22px;

  --emphasised: 2rem;
  --emphasised-letter-spacing: -0.4px;

  --body: 1rem;
  --body-line-height: 26px;
  --body-letter-spacing: -0.2px;

  --button: 1rem;
  --button-line-height: 26px;
  --button-letter-spacing: -0.2px;

  --body-s: 0.875rem;
  --body-s-line-height: 20px;
  --body-s-letter-spacing: -0.17px;

  --container-max-width: 635px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-gray);
  min-height: 100vh;
  padding: 75px 30px;
}

h1 {
  font-size: var(--h1);
  letter-spacing: var(--h1-letter-spacing);
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

.body-text {
  font-size: var(--body);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

.body-s-text {
  font-size: var(--body-s);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
}

.emphasised-text {
  font-size: var(--emphasised);
  letter-spacing: var(--emphasised-letter-spacing);
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 375px) {
  :root {
    --h1: 1.25rem;
    --h1-letter-spacing: -0.25px;

    --h2: 0.938rem;
    --h2-letter-spacing: -0.19px;

    --body: 0.875rem;
    --body-letter-spacing: -0.17px;
  }
}