:root {
        /* sub heading at top  */
        --pale-violet: hsl(276, 100%, 81%);

        /* left chat message  */
        --moderate-violet: hsl(276, 55%, 52%);
        --moderate-violet-pale: hsl(276, 55%, 93%);

        /* right chat message */
        --dark-violet: hsl(271, 15%, 43%);

        /* placeholder text */
        --grayish-blue: hsl(240, 6%, 54%);

        /* main heading */
        --very-dark-violet: hsl(271, 36%, 24%);

        /* paragraph */
        --dark-grayish-violet: hsl(270, 7%, 64%);


        /* secondary */
        /* app chat background */
        --light-grayish-violet: hsl(270, 20%, 96%);

        /* submit button */
        --very-dark-desaturated-violet: hsl(271, 36%, 24%);

        /* radio button */
        --very-light-magenta: hsl(289, 100%, 72%);



        /* gradients */
        --light-magenta: hsl(293, 100%, 63%);
        --light-violet: hsl(264, 100%, 61%);
        --mag-vio-gradient-r: linear-gradient(to right, var(--light-magenta), var(--light-violet));
        --mag-vio-gradient-l: linear-gradient(to left,  var(--light-magenta), var(--light-violet));
        --mag-vio-gradient-b: linear-gradient(to bottom,  var(--light-magenta), var(--light-violet));
}


/* CSS Reset */

/* Remove default margin and padding */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
        margin: 0;
        padding: 0;
}

/* Set box-sizing to border-box for all elements */
* {
        box-sizing: border-box;
}

html {
        width: 100%;
        height: 100%;
        font-size: 16px;
        transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Remove list styles (bullets/numbers) */
ol, ul {
        list-style: none;
}

/* Remove default hyperlink styles */
a {
        text-decoration: none;
        color: inherit;
}

body {
        font-family: 'Rubik', 'Inter', 'Poppins', sans-serif;
        overflow-x: hidden;
}

/* Reset image styles */
img {
        font-style: italic;

        shape-margin: 1rem;

        background-repeat: no-repeat;
        background-size: cover;

        max-width: 100%;
        height: auto;
        vertical-align: middle;
}