:root {
    --background: #1f1f1f;
    --primary: hsl(212, 10%, 26%);
    --secondary: hsl(263, 50%, 48%);
    --accent: hsl(47, 128%, 237%);
    --text: hsl(0, 0%, 12%);
    --white: #f0f0f0;

    --radius: .625rem;
    --spacing: .25rem;
    --breakpoint-2xl: 96rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: .125rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);
    --radius-4xl: calc(var(--radius) + 16px);
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;

    --font-primary: 'Bitter', serif;
    --font-secondary: 'Raleway', sans-serif;
  }

body {
    background-color: var(--background);
    color: var(--white);
    font-family: var(--font-primary);
}

p {
    font-family: var(--font-secondary);
}

.btn {
    border: none;
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing) * 2.5);
    font-family: var(--font-secondary);
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--secondary);
    color: var(--white);
}

.btn-secondary {
    background-color: var(--primary);
    color: var(--white);
}