base.css

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

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

  /* Primary */
  --green-dark: #24aea1;
  --green: #10d8c4;
  --green-light: #a4f3eb;
  --checkbox: #7aeadf;

  --orange: #ff8d68;
  --orange-light: #feede8;

  --cyan: #becdff;
  --cyan-light: #cfd8ef;

  /* Neutral */
  --black: #293356;
  --gray: #848ead;
  --light-gray: #ecf0fb;

  --background: #f9faff;

  /* Typography */
  --h1: 1.75rem;

  --strong: 2.5rem;

  --body: 1rem;

  --body-s: 0.938rem;
  --body-s-line-height: 23px;

  --body-xs: 0.875rem;

  --small: 0.75rem;

  --tiny: 0.625rem;
}

body {
  background: no-repeat url('./assets/bg-pattern.svg') top;
  background-color: var(--background);
  background-size: 100% 450px;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

h1 {
  font-size: var(--h1);
  font-weight: 800;
}

.strong-text {
  font-size: var(--strong);
}

.body-text {
  font-size: var(--body);
}

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

.body-xs-text {
  font-size: var(--body-xs);
}

.small-text {
  font-size: var(--small);
}

.tiny-text {
  font-size: var(--tiny);
}

@media (max-width: 650px) {
  main {
    padding: 0 30px 75px 30px;
  }
}

@media (max-width: 500px) {
  :root {
    --h1: 1.25rem;

    --strong: 2rem;

    --body: 0.875rem;

    --body-s: 0.813rem;

    --body-xs: 0.75rem;
  }

  body {
    background-position: top;
    background-size: 100% 400px;
  }
}