:root {

    /* Colors */

    --white: #fff;
    --black: #000;
    --blackish: #172332;
    --grey-1: #ececec;
    --grey-2: #dfdfdf;
    --grey-3: #bababa;
    --grey-4: #505050;
    --blue: #3680e9;
    --accent-error: #ff5167;

    /* 
        General
    */
    --base-font-size: 15px;
    --base-font-family: "Roboto", Arial, sans-serif;
    --base-border-radius: 10px;
    --base-text-color: var(--blackish);

    --icon-font-path: '../fonts/icomoon';

    --body-bg: var(--white);

    --header-height: 65px;

    --bg-image: url('/images/img-bg-mobile.jpg');
    --bg-image-lg: url('/images/img-bg-desktop.jpg');

    --font-size-s: 12px;
    --font-size-m: 15px;
    --font-size-l: 20px;
    --font-size-xl: 30px;

    --notification-color: var(--white);
    --notification-bg: var(--blackish);
    --notification-error-bg: var(--accent-error);
    --notification-succes-bg: var(--blackish);

    /* Container Variables */
    --container-width: 1180px;

    /* Content Variables */
    --content-width: 100%;
    --content-width-md: 55vw;
    --content-width-lg: 45vw;
    --content-top-padding: 33px;
    --content-bottom-padding: 37px;
    --content-x-padding-xs: 20px;
    --content-x-padding-sm: 59px;
    --content-x-padding-md: 40px;
    --content-bg: var(--white);
    --content-border-radius: var(--base-border-radius);
    --content-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);

    --footer-bg: var(--white);
    --footer-color: var(--blackish);

    /* Headlines */

    --headline-color:  var(--blackish);
    --h1-font-size-sm: var(--font-size-xl);
    --h1-font-size-md: var(--font-size-xl);
    --h2-font-size-sm: var(--font-size-xl);
    --h2-font-size-md: var(--font-size-xl);

    /* Buttons */

    --button-border-radius: 6px;
    --button-primary-bg: var(--blackish);
    --button-primary-color: var(--white);
    --button-primary-border: var(--blackish);
    --button-primary-hover-bg: var(--black);
    --button-primary-hover-color: var(--white);
    --button-primary-hover-border: var(--blackish);

    --button-secondary-bg: transparent;
    --button-secondary-color: var(--black);
    --button-secondary-border: var(--black);
    --button-secondary-hover-bg: transparent;
    --button-secondary-hover-color: var(--blue);
    --button-secondary-hover-border: var(--blue);

    --link-primary-color: var(--blackish);
    --link-primary-hover-color: var(--blue);

    --link-secondary-color: var(--blue);
    --link-secondary-hover-color: var(--blue);

    /* Form Items */

    --input-item-space-between-sm: 30px;
    --input-item-space-between: 42px;

    --input-border-width: 2px;
    --input-height: 42px;
    --input-border-radius: 0;
    --input-top-border-color: transparent;
    --input-right-border-color: transparent;
    --input-bottom-border-color: var(--grey-1);
    --input-left-border-color: transparent;


    --input-top-border-active-color: transparent;
    --input-right-border-active-color: transparent;
    --input-bottom-border-active-color: var(--blackish);
    --input-left-border-active-color: transparent;

}