:root {
    /*colors*/
    --black: #0c0b0b;
    --white: #ffffff;
    --ve-grey: #EAEAEA;
    --ve-lightgrey: #9B9BA9;
    --ve-darkgrey: #9D9797;

    /* The blue color is the primary color */
    --ve-lightblue: #2873ff;
    --ve-blue: #3346E6;
    /* -- */

    --ve-red: #DC3545;
    --ve-yellow: #FDC500;
    --ve-darkblue: #22243f;
    --ve-bordergray: #CFCFCF;
    --ve-textgray: #666666;
    --ve-primary-text-color: var(--white); /* this is the color of all the text on the website */
    --ve-secondary-text-color: var(--white);

    --ve-primary-btn-hover-bg: var(--white);
    --ve-primary-btn-hover-color: #3346E6;
    --ve-btn-circle-color: var(--white); /* color of the text/icon inside the button */
    --ve-btn-circle-img-brigthness-filter: 0; /* filter 0 to have img inside the button white */
    --ve-btn-transparent-bg: #0c0b0b38; /* background color of btn-transparent */
    --ve-btn-transparent-color: var(--ve-primary-text-color); /* color of btn-transparent */
    --ve-btn-border-color: var(--ve-primary-text-color); /* border-color of btn-transparent */
    --ve-btn-transparent-bg-hover: var(--white); /*on Hover background color of btn-transparent */
    --ve-btn-transparent-color-hover: #0c0b0b; /*on Hover color of btn-transparent */
    --ve-btn-border-color-hover: var(--ve-primary-text-color); /*on Hover border-color of btn-transparent */

    --ve-background: #17161B; /* background color of the website */
    --ve-icon-color: #0587C0; /* the color of the arrow icons */
    --ve-navbarbackground: #27272F;
    --navbar-on-top-color: transparent;
    --ve-footerbackground: #201F26;
    --ve-backtopbackground: #26252D;

    /* color rgbA gradient... IMPORTANT the rgbA color must be the color in the variable "--ve-background"*/
    --ve-background-gradient-0: rgba(23,22,27,0) 0%; /* background color rgba 0% */
    --ve-background-gradient-1: rgba(23,22,27,0.30438112745098034) 20%; /* background color rgba 20% */
    --ve-background-gradient-2: rgba(23,22,27,0.6181066176470589) 50%; /* background color rgba 50% */
    --ve-background-gradient-3: rgba(23,22,27,1) 85%; /* background color rgba 85% */

    --desktop-padding: 80px;
    --mobile-padding: 25px;

    /*sizes*/
    --container-max: 1920px;

    /*default square border*/
    --default-border: 1px solid var(--ve-bordergray);
    --navbar-height: 100px;

    --trailer-btn-background: transparent;
    --trailer-btn-hover-background: var(--white);
    --trailer-btn-hover-color: #0c0b0b;
    --trailer-btn-border-color: var(--ve-primary-text-color);

    --banner-video-trailer-background: var(--black);
    /* the rgba color must must be the color in the variable "--banner-video-trailer-background"*/
    --banner-video-trailer-background-gradient: rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%;
    --banner-video-trailer-border: none;

    --swiper-arrow-background: transparent;

    /* Tags list link */
    --tag-link-color: var(--ve-primary-text-color);

    /* Dropdown colors */
    --dropdown-border-color: #333333;

    /* Tv-series detail colors */
    --episode-hover-background: #333333;
}