*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;

    --webkit-font-smoothing: antialiased;
    --moz-osx-font-smoothing: grayscale;
}

:root {
    --bg-color: #0A192F;
    --bg-color-2: #112240;
    --surface-color: #1E2A47;
    --stroke-color: #2E3A59;
    --text-color-primary: #E6F1FF;
    --text-color-seconday: #8892B0;
    --brand-color-secondary: #0053d8;

    --ff-sans: 'Inter', system-ui, sans-serif;
    --fw-base: 400;
    --fw-md: 500;
    --fw-bold: 800;

    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2.5rem;

    --px-lg: 1.5rem;
}

html {
    font-family: var(--ff-sans);
    font-weight: var(--fw-base);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-color-seconday);
    background: linear-gradient(160deg, var(--bg-color), var(--bg-color-2));
}

body, html {
    background: linear-gradient(160deg, var(--bg-color), var(--bg-color-2));
}


h1, h2, h3 {
    line-height: 1.2;
    color: var(--text-color-primary);
    font-weight: var(--fw-bold);
    letter-spacing: -0.04em;
}

h1 {
    font-size: var(--fs-2xl);
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-lg);
}

a {
    text-decoration: none;
    color: inherit;
}

ul[role="list"] {
    list-style: none;
}

@media (width >= 80em) {
    :root {
        --fs-lg: 2rem;
        --fs-xl: 3rem;
        --fs-2xl: 4rem;

        --px-lg: 2rem;
    }
}