@import url('https://fonts.googleapis.com/css2?family=Aller:wght@400;500;700&display=swap');

:root {
/* Font Family */
--font-family: 'Aller', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'Courier New', monospace;

/* Display Sizes */
--display-large-size: 57px;
--display-large-weight: 700;
--display-large-line-height: 1.12;
--display-large-letter-spacing: 0;

--display-medium-size: 45px;
--display-medium-weight: 700;
--display-medium-line-height: 1.16;
--display-medium-letter-spacing: 0;

--display-small-size: 36px;
--display-small-weight: 700;
--display-small-line-height: 1.22;
--display-small-letter-spacing: 0;

/* Headline Sizes */
--headline-large-size: 32px;
--headline-large-weight: 700;
--headline-large-line-height: 1.25;
--headline-large-letter-spacing: 0;

--headline-medium-size: 28px;
--headline-medium-weight: 700;
--headline-medium-line-height: 1.29;
--headline-medium-letter-spacing: 0;

--headline-small-size: 24px;
--headline-small-weight: 700;
--headline-small-line-height: 1.33;
--headline-small-letter-spacing: 0;

/* Title Sizes */
--title-large-size: 22px;
--title-large-weight: 500;
--title-large-line-height: 1.27;
--title-large-letter-spacing: 0;

--title-medium-size: 16px;
--title-medium-weight: 500;
--title-medium-line-height: 1.5;
--title-medium-letter-spacing: 0.15px;

--title-small-size: 14px;
--title-small-weight: 500;
--title-small-line-height: 1.43;
--title-small-letter-spacing: 0.1px;

/* Body Sizes */
--body-large-size: 16px;
--body-large-weight: 400;
--body-large-line-height: 1.5;
--body-large-letter-spacing: 0.15px;

--body-medium-size: 14px;
--body-medium-weight: 400;
--body-medium-line-height: 1.43;
--body-medium-letter-spacing: 0.25px;

--body-small-size: 12px;
--body-small-weight: 400;
--body-small-line-height: 1.33;
--body-small-letter-spacing: 0.4px;

/* Label Sizes */
--label-large-size: 14px;
--label-large-weight: 500;
--label-large-line-height: 1.43;
--label-large-letter-spacing: 0.1px;

--label-medium-size: 12px;
--label-medium-weight: 500;
--label-medium-line-height: 1.33;
--label-medium-letter-spacing: 0.5px;

--label-small-size: 11px;
--label-small-weight: 500;
--label-small-line-height: 1.45;
--label-small-letter-spacing: 0.5px;
}

/* Type Utilities */
.display-large { font-size: var(--display-large-size); font-weight: var(--display-large-weight); line-height: var(--display-large-line-height); letter-spacing: var(--display-large-letter-spacing); }
.display-medium { font-size: var(--display-medium-size); font-weight: var(--display-medium-weight); line-height: var(--display-medium-line-height); letter-spacing: var(--display-medium-letter-spacing); }
.display-small { font-size: var(--display-small-size); font-weight: var(--display-small-weight); line-height: var(--display-small-line-height); letter-spacing: var(--display-small-letter-spacing); }
.headline-large { font-size: var(--headline-large-size); font-weight: var(--headline-large-weight); line-height: var(--headline-large-line-height); letter-spacing: var(--headline-large-letter-spacing); }
.headline-medium { font-size: var(--headline-medium-size); font-weight: var(--headline-medium-weight); line-height: var(--headline-medium-line-height); letter-spacing: var(--headline-medium-letter-spacing); }
.headline-small { font-size: var(--headline-small-size); font-weight: var(--headline-small-weight); line-height: var(--headline-small-line-height); letter-spacing: var(--headline-small-letter-spacing); }
.title-large { font-size: var(--title-large-size); font-weight: var(--title-large-weight); line-height: var(--title-large-line-height); letter-spacing: var(--title-large-letter-spacing); }
.title-medium { font-size: var(--title-medium-size); font-weight: var(--title-medium-weight); line-height: var(--title-medium-line-height); letter-spacing: var(--title-medium-letter-spacing); }
.title-small { font-size: var(--title-small-size); font-weight: var(--title-small-weight); line-height: var(--title-small-line-height); letter-spacing: var(--title-small-letter-spacing); }
.body-large { font-size: var(--body-large-size); font-weight: var(--body-large-weight); line-height: var(--body-large-line-height); letter-spacing: var(--body-large-letter-spacing); }
.body-medium { font-size: var(--body-medium-size); font-weight: var(--body-medium-weight); line-height: var(--body-medium-line-height); letter-spacing: var(--body-medium-letter-spacing); }
.body-small { font-size: var(--body-small-size); font-weight: var(--body-small-weight); line-height: var(--body-small-line-height); letter-spacing: var(--body-small-letter-spacing); }
.label-large { font-size: var(--label-large-size); font-weight: var(--label-large-weight); line-height: var(--label-large-line-height); letter-spacing: var(--label-large-letter-spacing); }
.label-medium { font-size: var(--label-medium-size); font-weight: var(--label-medium-weight); line-height: var(--label-medium-line-height); letter-spacing: var(--label-medium-letter-spacing); }
.label-small { font-size: var(--label-small-size); font-weight: var(--label-small-weight); line-height: var(--label-small-line-height); letter-spacing: var(--label-small-letter-spacing); }