/* TODO: check all caps lock variables (reorganise + check use) */
:root{
    /* Default values for most CSS fields.
        Can be modified, but DO NOT DELETE ANY FIELD!
    */

    /* Fonts defined in config ("params.fonts.definitions") are available through
        CSS variables named "--GENERAL-FONT-X" where "X" is the index in the list (starting from 1).
        By default, 3 fonts are defined anyway:
        --GENERAL-FONT-1
        --GENERAL-FONT-2
        --GENERAL-FONT-3
    */

    --GENERAL-COLOR-1: rgb(64, 95, 240);
    --GENERAL-COLOR-2: white;
    --GENERAL-FONT-COLOR-1: black;
    --GENERAL-FONT-COLOR-2: var(--GENERAL-COLOR-1);
    --GENERAL-FONT-COLOR-3: var(--GENERAL-COLOR-2);
    --GENERAL-FONT-COLOR-4: rgba(255, 255, 255, .7);
    --GENERAL-LINK-COLOR-1: var(--GENERAL-COLOR-1);
    --GENERAL-LINK-ACTIVE-COLOR-1: rgb(21, 56, 214);
    --GENERAL-LINK-COLOR-2: rgba(64, 64, 64, .75);
/* TODO: change! */
    --GENERAL-LINK-ACTIVE-COLOR-2: var(--GENERAL-LINK-ACTIVE-COLOR-1);

    /* NAVBAR */
    --NAVBAR-HEIGHT: 50px; /* ! - Must correspond to the real navbar height! (Horrible hack) */

    --NAVBAR-BACKGROUND-COLOR: rgba(255, 255, 255, .3);
    --NAVBAR-FONT: var(--GENERAL-FONT-2);
    --NAVBAR-BRAND-FONT: var(--GENERAL-FONT-3);
    --NAVBAR-BRAND-COLOR: var(--GENERAL-FONT-COLOR-1);
    --NAVBAR-BRAND-HOVER-COLOR: var(--GENERAL-FONT-COLOR-2);
    --NAVBAR-BUTTON-COLOR: var(--GENERAL-FONT-COLOR-1);
    --NAVBAR-BUTTON-HOVER-COLOR: var(--GENERAL-FONT-COLOR-2);
    --NAVBAR-BUTTON-ACTIVE-COLOR: var(--GENERAL-FONT-COLOR-2);
    --NAVBAR-BUTTON-ACTIVE-BACKGROUND-COLOR: transparent;
    --NAVBAR-FIXED-BACKGROUND-COLOR: var(--GENERAL-COLOR-2);
    --NAVBAR-FIXED-BRAND-COLOR: var(--GENERAL-FONT-COLOR-2);
    --NAVBAR-FIXED-BRAND-HOVER-COLOR: var(--GENERAL-LINK-ACTIVE-COLOR-1);
    --NAVBAR-FIXED-BUTTON-COLOR: var(--GENERAL-LINK-COLOR-2);
    --NAVBAR-FIXED-BUTTON-HOVER-COLOR: var(--GENERAL-LINK-ACTIVE-COLOR-2);


    --GENERAL-IMAGE-BORDER-RADIUS: 0;
    --GENERAL-BOX-SHADOW: 0px 3px 9px rgba(0, 0, 0, .05);

    --GENERAL-PROFILE-FONT-SIZE: 0.75em;

    --HR-WIDTH: 20%;

    --COPYRIGHT-FONT: Arial, sans-serif;

/*TODO: check best padding - 100px is too much */
    --homepage-section-padding: 50px 0 25px 0;


    /* HERO IMAGE */
/*
    --hero-image-height: 500px;
    --hero-image-height-small: 250px;
*/
    /* ! - Must be in "px", else need to change "calc" formula for "empty-padding" */
    --hero-image-margin-bottom: -50px;
    --hero-image-margin-bottom-small: -75px;
}


/* HOME */
#home {
    /* The following variables should not be changed (managed by code) */
    --home-width: 50%;
    --home-offset-h: 50%;
    --home-offset-v: 50%;
    --home-text-align: center;
}

/* ABOUT */
#about {
    --about-bkg-color: var(--GENERAL-COLOR-1);
    --about-bkg-opacity: 1.0;
    --about-bkg-position: center center;
    --about-bkg-size: cover;

    --about-title-color: var(--GENERAL-FONT-COLOR-1);
    --about-title-bar-color: var(--GENERAL-COLOR-2);

    --about-link-color: var(--GENERAL-LINK-COLOR-2);
    --about-link-color-active: var(--GENERAL-FONT-COLOR-2);

    --about-profile-bkg-color: var(--about-bkg-color);
    --about-profile-margin: 1rem;
    --about-profile-border: 0;

    --about-profile-image-border-radius: var(--GENERAL-IMAGE-BORDER-RADIUS);
    --about-profile-image-border: 0;
    --about-profile-text-padding-h: 1rem;
    --about-profile-text-padding-v: 1rem;

    --about-main-bkg-color: var(--about-bkg-color);
    --about-main-border: 0;
    --about-main-text-color: var(--GENERAL-FONT-COLOR-1);
    --about-main-text-padding-h: 1rem;
    --about-main-text-padding-v: 0;

    /* The following variables should not be changed (managed by code) */
    --about-bkg-width: 100%;
    --about-bkg-margin-left: 0;
    --about-bkg-margin-right: 0;
}


/* SERVICES */
#services {
    --services-bkg-color: var(--GENERAL-COLOR-2);

    --services-title-color: var(--GENERAL-FONT-COLOR-1);
    --services-title-bar-color: var(--GENERAL-COLOR-1);

    --services-container-color: transparent;
    --services-container-border-radius: 0;
    --services-container-shadow: 0;

    --services-box-color: var(--GENERAL-COLOR-2);
    --services-box-border-radius: 0;
    --services-box-shadow: 0;
    --services-box-height: 18em;

    --services-icon-color: var(--GENERAL-COLOR-1);
    /* TODO: add other variables? */
}


/* SKILLS */
#skills {
    --skills-title-color: var(--GENERAL-FONT-COLOR-1);
    --skills-title-bar-color: var(--GENERAL-COLOR-1);
}

/* PROJECTS */
.project-box {
/*
TODO: REMOVE? keep/adapt?
    --PROJECTBOX-NAME-FONT: var(--GENERAL-FONT-2);
    --PROJECTBOX-CATEGORY-FONT: var(--GENERAL-FONT-2);
    --PROJECTBOX-DATE-FONT: var(--GENERAL-FONT-2);
*/
/* TODO: useless? */
/*    --projectbox-image-width: 650px;*/
    --projectbox-image-padding: 0;
    --projectbox-caption-background-color: rgba(64, 95, 240, .9);
}

/* CONTACT */
#contact {
/*
TODO: REMOVE? keep/adapt?
    --CONTACT-PROFILE-COLOR: var(--GENERAL-COLOR-2);
    --CONTACT-PROFILE-BORDER-RADIUS: 0px;
    --CONTACT-PROFILE-BOX-SHADOW: var(--GENERAL-BOX-SHADOW);
    --CONTACT-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
*/
    --contact-title-color: var(--GENERAL-FONT-COLOR-1);
    --contact-title-bar-color: var(--GENERAL-COLOR-1);

    --contact-color: var(--GENERAL-FONT-COLOR-1);
    --contact-bkg-color: white;
}