/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}
li {
  margin-left: 1em;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


strong {
    font-weight: 600;
}

cite em {
    font-style: italic;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a {
  outline: 0;
}



/*
=======================================================
  Whole Body 
=======================================================
*/

/* ---------------- whole body -------------- */
.it-websitebody {
    background-color: var(--col-accent1-light);
    background-image: -webkit-linear-gradient(to right, #00000000 0%, white 3%, var(--col-accent1-ll) 97%, #00000000 100%) ;
    background-image: -moz-linear-gradient(to right, #00000000 0%, white 3%, var(--col-accent1-ll) 97%, #00000000 100%) ;
    background-image: -o-linear-gradient(to right, #00000000 0%, white 3%, var(--col-accent1-ll) 97%, #00000000 100%) ;
    background-image: linear-gradient(to right, #00000000 0%, white 3%, var(--col-accent1-ll) 97%, #00000000 100%) ;
}

#it_body_cont_scrollable {
    background-image: url('/images/intro/col_dots.png');
    background-repeat: repeat-y;
    background-size: 25vw;
    background-position-x: right;
}

@media all and (min-width: 768px) {
    .it-websitebody {
        background-image: -webkit-linear-gradient(to top right, #00000000, white, var(--col-accent1-ll) 120%);
        background-image: -moz-linear-gradient(to top right, #00000000, white, var(--col-accent1-ll) 120%);
        background-image: -o-linear-gradient(to top right, #00000000, white, var(--col-accent1-ll) 120%);
        background-image: linear-gradient(to top right, #00000000, white, var(--col-accent1-ll) 120%);

        overflow: hidden;
        background-size: 100% 100%;
    }

    #it_body_cont_scrollable {
        background-size: 180px;
    }
}


/* The box-sizing property allows to include the padding and border in an element's total width and height */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}



/*
=======================================================
  Colors
=======================================================
*/

:root {
  /* main colour scheme */
  --col-accent1: #00ff6a;
  --col-accent1-light: #63e99b;
  --col-accent1-ll: #c6ffde;
  --col-accent1-pale: #73f1a8;

  --col-accent2: #8668f1;
  --col-accent2-light: #b8a8f1;
  --col-accent2-ll: #d5cdf1;
  --col-accent2-dark: #4d1bc2; 
  --col-accent2-dd: #412485;
  --col-accent2-ddd: #160f35;

  --col-accent3: #3300ff;
  --col-accent3-dark: #2700c2;

  /* general colours */
  --grey: rgba(0,0,0,0.25);
  --grey-dark: rgba(0,0,0,0.4);

  /* text */
  --col-body-bg: #F0EEF4; /* darker F8F8F8 */
  --col-body-bg2: #FCFCFC; /* lighter FBFBFB */
  --col-text: var(--col-accent2-ddd);
  --col-text-grey: #2f2449;
  --col-text-grey-d: #2e195fcc;

  /* highlights */
  --col-hightlight-outset: rgba(255,255,255,0.2);
  --col-hightlight-inset: rgba(255,255,255,0.6);
}


/*
=======================================================
  Text
=======================================================
*/

:root {
  /* font family */
  --font-fam: "Montserrat"; /* Raleway */
  --font-fam-title: "Montserrat"; /* Poiret One requires adding to all files */

  /* text - paragraph */
  --font-size-p-small: 0.85em;
  --font-size-p: 0.9em;
  --font-size-h6: 0.8em;
  --font-size-h5: 0.97em;
  --font-size-h4: 1.05em;

  /* text - title */  
  --font-size-h3: 1.05em;
  --font-size-h2: 1.15em;
  --font-size-h1: 1.35em;

  /* space between lines */
  --font-lspace-p: 1.7;
  --font-lspace-title: 1.4;

  /* space between characters */
  --font-chspace-h5: 0.03em;
  --font-chspace-h3: 0.05em;
  --font-chspace-h2: 0.07em;
  --font-chspace-h1: 0.12em;

  /* weight */
  --font-weight-text: 500;
}


/* default settings */
h1, h2, h3 {
  font-family: var(--font-fam-title);
  color: var(--col-text);
  line-height: var(--font-lspace-title);
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

h4, h5, h6, p {
  font-family: var(--font-fam);
  color: var(--col-text);
  font-weight: var(--font-weight-text);
  line-height: var(--font-lspace-p);
}

/* updating settings */
/* ------ h1 ------ */
h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
  letter-spacing: var(--font-chspace-h1);
}

/* ------ h2 ------ */
h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  letter-spacing: var(--font-chspace-h2);
}

/* ------ h3 ------ */
h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  letter-spacing: var(--font-chspace-h3);
}

/* ------ h4 ------ */
h4 {
  font-size: var(--font-size-h4);
  font-weight: 600;
  color: var(--grey-dark);
}

/* ------ h5 ------ */
h5 {
  font-size: var(--font-size-h5);
  letter-spacing: var(--font-chspace-h5);
}

/* ------ h6 ------ */
h6 {
  font-size: var(--font-size-h6);
  text-transform: uppercase;
}

/* ------ p ------ */
p {
  font-size: var(--font-size-p);
}