:root {
    /* plain colors */
    --white: rgba(255, 255, 255, 1);
    --light: rgba(248, 248, 248, 1);
    --light-gray: rgb(240, 240, 240);
    --dark: rgba(16, 16, 16, 1);
    --dark-light: rgba(48, 48, 48, 1);
    --dark-alpha: rgba(16, 16, 16, 0.6);
    --gray-alpha: rgba(52, 24, 24, 0.05);
    --gray: rgba(232, 232, 232, 1);

    --light-blue: #2a819c;

    /* text colors */
    --text: var(--dark);
    --text-light: var(--dark-light);
    --text-inactive: var(--dark-alpha);
    --text-opposite : var(--white);

    /* element colors */
    --nav-color: var(--light);
    --background-color: var(--light-gray);
    --link: var(--light-blue);

    /* font */
    --main-font: 'Lato';
    --brand-font: var(--main-font);

    /* sizes */
    --font-size: 16px;
    --font-size-mobile: 14px;
    --page-w: 1080px;
}