:root {
    --content-primary: #FFFFFF;
    --content-secondary: #C7C9CC;
    --content-tertiary: #D9D9D9;
    --content-brand: #C58DE7;
    --color-inverse: #030203;

    --background-primary: #020202;
    --background-secondary: #111012;
    --background-tertiary: #24222E;
    --background-brand: #C58DE7;
    --background-gray: #3D3D3D;

    --accent-pink: #D586E0;
    --accent-blue: #91A1FA;
    --accent-green: #77C0AF;
    --accent-lime: #D1DC97;
    --accent-red: #E9A9B3;

    --gradient-border: linear-gradient(90deg,
            #77C0AF 0%,
            #D1DC97 14.84%,
            #E9A9B3 32.15%,
            #D586E0 65.79%,
            #91A1FA 84.58%);
    --gradient-background: linear-gradient(90deg,
            #D586E0 0%,
            #91A1FA 98.93%);
    --gradient-content: linear-gradient(90deg,
            #C7C9CC 0%,
            #3D3D3D 100%);

    --ff-sora: "Sora", sans-serif;
    --display-lg: 800 4.5rem/130% var(--ff-sora);
    --display-md: 800 2.5rem/130% var(--ff-sora);
    --display-sm: 700 2rem/130% var(--ff-sora);

    --ff-roboto-mono: "Roboto Mono", monospace;
    --overline: 700 1rem/150% var(--ff-roboto-mono);

    --ff-roboto-flex: "Roboto Flex", sans-serif;
    --paragraph-lg: 500 1rem/150% var(--ff-roboto-flex);
    --paragraph-md: 500 .875rem/150% var(--ff-roboto-flex);
    --paragraph-sm: 500 .75rem/150% var(--ff-roboto-flex);
    --label-md: 700 1.25rem/150% var(--ff-roboto-flex);
    --label-sm: 700 1rem/150% var(--ff-roboto-flex);
}

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

* {
    margin: 0;
    padding: 0;

    color: inherit;
    font: inherit;
    font-style: normal;
    font-optical-sizing: auto;

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

body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(22%, rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, 0.8))),
        url("../assets/background.png") var(--background-primary);
    background: -o-linear-gradient(top, rgba(0, 0, 0, .9) 22%, rgba(0, 0, 0, 0.8) 100%),
        url("../assets/background.png") var(--background-primary);
    background: linear-gradient(180deg, rgba(0, 0, 0, .9) 22%, rgba(0, 0, 0, 0.8) 100%),
        url("../assets/background.png") var(--background-primary);

    min-height: 100lvh;

    font: var(--paragraph-lg);
    color: var(--content-secondary);
}

img {
    display: inline-block;
    max-width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

a {
    text-decoration: none;
}

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