:root{
    --color-accent:#E31C79;
    --color-accent-2:#0981E5;
    --color-accent-3:#A688F8;
    --color-main:#3E2A9B;
    --color-main-dark:#11005E;
    --color-main-bright:#7851f9;
    --color-white:#FFFFFF;
    --color-off-white:#F5F4FA;

    --color-main-text: #11005E;
    --color-white-text: #ffffff;
    --color-main-bright-text: #A688F8;

    --radius: 20rem;
    --radius-button: 12rem;
    --radius-inner: 20rem;

    --spacing-wrapper: 25rem;
    --spacing-wrapper-center: var(--spacing-wrapper);
    --spacing-vertical: 54rem;
    --spacing-gap-y: 25rem;
    --spacing-gap-x: 15rem;

    --padding-inline: 20rem;
    --padding-block: 20rem;

    @media all and (width >= 768px) {
        --radius: 20rem;
        --radius-button: 12rem;
        --radius-inner: 20rem;

        --spacing-wrapper: 60rem;
        --spacing-vertical: 70rem;
        --spacing-gap-y: 25rem;
        --spacing-gap-x: 30rem;

        --padding-inline: 25rem;
        --padding-block: 25rem;
    }

    @media all and (width >= 1280px) {
        --radius: 20rem;
        --radius-button: 12rem;
        --radius-inner: 20rem;

        --spacing-wrapper: 97.5rem;
        --spacing-wrapper-center: var(--spacing-wrapper);
        --spacing-vertical: 112.5rem;
        --spacing-gap-y: 27.5rem;
        --spacing-gap-x: 35rem;

        --padding-inline: 32.5rem;
        --padding-block: 32.5rem;
    }

    @media all and (width >= 1440px) {
        --radius: 20rem;
        --radius-button: 12rem;
        --radius-inner: 20rem;

        --spacing-wrapper: 135rem;
        --spacing-wrapper-center: clamp(135rem, calc(340rem - (1920rem - 100vw)), 340rem);
        --spacing-vertical: 155rem;
        --spacing-gap-y: 30rem;
        --spacing-gap-x: 40rem;

        --padding-inline: 40rem;
        --padding-block: 40rem;
    }
}