/****************************
 *     GENERAL SETTINGS     *
 ****************************/

@import url("/css/colors.css");
@import url("/css/fa.css");

* {
    font-family: var(--ft-family);
    color: var(--ft-color);
}


/*****************
 *     RESET     *
 *****************/

html, body {
 margin:0;
 padding:0;
 }

body {
    background-color: var(--color-black);
}

/*******************
 *     Nav bar     *
 *******************/

/* Nav-bar properties */
nav {
    display: inline-flex;
    width: 100%;
    height: 100%;
	padding:24px 0px;
	margin:0px;
    line-height: auto;
    text-align: center;
	background-color: var(--color-darker);
    border-bottom: solid;
    border-bottom-color: var(--color01);
    border-bottom-width: 1px;
}

/* Menu ul properties */
nav ul {
    display: inline-flex;
    list-style-type:none;
    height: 100%;
    margin:0px;
	padding:0px;
}

/* Menu list properties */
li { 
    display: flex;
    height: 100%;
    margin:0px;
    padding:0px;
}

li a {
    width:120px;
	height:100%;
	margin:0px 5px;
	padding:8px 10px;
    border-style: solid;
    border-radius: 20px;
    border-width: 1px;
    border-color: var(--color-darker);
    color: var(--color01);
    text-decoration:none;    
}

/* Menu animations */
li a:hover { color: var(--color01); background-color:var(--color-darker); border-color: var(--color-dark) }
li a.selected { color: var(--color01); background-color: var(--color-darker); border-color: var(--color01) }
li a.selected:hover { color: var(--color-light); background-color: var(--color-darker); border-color: var(--color-light) }
a.home {
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top;
    font-size: 30px;
    color: var(--color01);
    border:none;
    text-decoration:none;
}
a.home:hover { color: var(--color-light) }

/* Logo */
img.logo-home {
    height: 40px;
    width: auto;
    margin-right: 10px;
}

/******************
 *     Titles     *
 ******************/

h1 { 
    color: var(--color01);
    border-bottom-style: solid;
    border-bottom-width: 1px; 
}


/*******************
 *     Classes     *
 *******************/

/* Container */
.container { width:100%; display: inline-flex }

/* Nav-bar */
.nav-home { flex-grow: 1 }
.nav-spacer { flex-grow: 3 }
.nav-menu { flex-grow: 0.5 }

/* CV */
.left-panel { flex-grow: 1; background-color: var(--color-black) }
.main-panel { flex-grow: 7; margin: 0 100px 50px 100px }

/* CV Gray box */
.gray-box {
    padding: 15px 30px;
    margin: 30px 30px;
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    border-color: var(--color-dark);
    color: var(--color-light);
    background-color: var(--color-darker);
}
div.gray-box p { 
    display:block;
    margin: 4px;
    padding:0;
}

/* CV Left panel */
.left-box {
    padding: 0 5% 3% 5%;
    margin: 30px 30px;
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    border-color: var(--color01);
    color:var(--color01);
    background-color: var(--color-black);
}
.left-box-title {
    margin: 10px 0;
    padding: 0;
    color: var(--color01); 
    text-align:center;
    font-size: 32px;
}
.left-box-subtitle {
    margin: 20px 10%;
    padding: 2px 0;
    border-style: solid;
    border-radius: 20px;
    border-width: 1px;
    border-color: var(--color01);
    color: var(--color-black); 
    background-color: var(--color01);
    text-align: center;
}
ul.left-box-list { display:block }



/* CV Main panels */

.main-box {
    padding-top: 50px;
}

.main-box * { 
    margin: 0;
    padding: 0;
}

/* Formations items */
p.diploma-name {
    padding-top: 20px;
    font-weight: bold;
}
p.diploma-location {
    color: var(--color01);
}

/* Professional items */
p.experience-name {
    padding-top: 20px;
}
p.experience-description {
    font-weight: normal;
}
p.experience-location {
    color: var(--color01);
}

/* Projects items */
p.project-name {
    padding-top: 20px;
    font-weight: bold;
}
p.project-description {
    color: var(--color01);
}