/*Colours*/
:root {
    --c-white: hsl(0, 0%, 100%);
    --c-gray-dark: hsl(233, 14%, 25%);
    --c-purple: hsl(232, 58%, 55%);
    --c-teal: hsl(180, 100%, 42%);
    --c-transparent: transparent;
    --c-magenta: hsl(320, 85%, 41%);

    --color-main-bg: var(--c-white);
    --color-text-dark: var(--c-gray-dark);
    --color-text-white: var(--c-white);
    --color-hero-bg: var(--c-purple);
    --color-button-primary-bg: var(--c-teal);
    --color-button-primary-text: var(--c-gray-dark);
    --color-button-secondary-bg: var(--c-transparent);
    --color-button-secondary-border: var(--c-white);
    --color-button-secondary-text: var(--c-white);
    --color-fullwidth-bg: var(--c-magenta);
}



/*Boiler plate styles*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;

}

a {
    text-decoration: none;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/*Wrapper styles*/

.wrapper {
    width: min(calc(100% - 48px), calc(1200/16 * 1rem));
    margin-inline: auto;
}