@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
/* Google fonts */


html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: white;
	font-family: 'Roboto', sans-serif;
	color: #525354;
}

#main-container {
	margin: 0% 2.5%;
	padding-top: 5px;
}


/* Header CSS */
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#tagline {
	font-size: large;
	font-weight: 700;
	justify-content: center;
	display: flex;
	margin-top: 2%;
}

#photo, #personal-infos {
	display: flex;

}

#personal-infos {
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding-left: 10px;
}

#name {

	font-size: xxx-large;
	font-weight: 700;
	color: #525354;
	margin-bottom: 0;
}

#position {

	font-size: xx-large;
	font-weight: 700;
	color: white;
	background-color: #ffca00;
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	text-align: center;
}

#birth {
	align-self: flex-end;
	margin-top: 0;

	font-size: medium;
	color: #525354;
}

#photo {
	justify-content: end;
	/*max-height: 400px;
	max-width: 46%;*/
}

#graphe-svg {
	min-width: 120px;
	max-width: 500px;
}

#profile {
	border-radius: 50%;
	width: 100%;
	height: auto;

}

#container-photo {
	justify-content: center;
	align-items: center;
	display: flex;
	max-width: 250px;
	margin-left: -5%;
}

#contact-infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;

	font-size: large;
	color: #525354;

}




.icon-top {
	margin-right: 5px;

}

.infos-item {
	margin-bottom: 5px;
}

.infos-item a {
	color: inherit;
	text-decoration: none;
}

.infos-item:hover {
	color: #ffca00;
	text-decoration: underline;

}

#cv-down {
	background-color: #525354;
	color: white;
	padding: 10px;
	font-size: 0.8em;
	font-weight: 700;
	position: absolute;
	top: 5px;
	right: 15px;
	box-shadow: 0px 1px 18px -11px rgba(0, 0, 0, 1);
	text-decoration: none;
}


#cv-down:hover {
	background-color: white;
	color: #525354;
	text-decoration: underline;
	box-shadow: none;
}

/* Main body CSS */
#main-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 4%;
}

.main-element {
	flex: 1 1 0px;
	margin-bottom: 30px;
	gap: 40px;
}

.main-title {

	font-size: xx-large;
	text-transform: uppercase;
	color: #525354;
	font-weight: 700;
	margin-bottom: 10px;
}

.first-title {
	margin-top: -3px;
}

.item-title {
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: 5px;
}

.item-date {
	font-size: medium;
	font-weight: 300;
	padding-top: 7px;
}

.item-body {
	display: flex;
	flex-direction: column;
}

/* Left part of main body */

#education {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: 10px;
	border-right: 1px solid #525354;
}

#education-title {
	text-align: end;
}

.education-item {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-bottom: 35px;
}

.edu-body {
	align-items: flex-end;
	margin-right: 10px;
}

.edu-title {
	text-align: end;
}

.edu-title-light {
	font-size: 0.8em;
	font-weight: 300;
}

.edu-link {
	text-decoration: none;
	color: inherit;
}

.edu-link:hover {
	color: #ffca00;
}

.edu-loc {
	font-style: italic;
	text-align: end;
}

.edu-subtitle {
	font-size: 1em;
	margin-bottom: 5px;
	text-align: right;
}

.subt-bold {
	font-size: 1.3em;
}

.edu-date {

	margin-left: 10px;

}

#bar-plot {
	max-width: 400px;
	margin-bottom: 35px;
	row-gap: 15px;
}

.bar-element {
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	font-size: large;
	align-items: center;
	margin-bottom: 15px;

}

.bar {
	color: white;
	padding-right: 5px;
	text-align: end;
	text-transform: uppercase;
	font-weight: 700;
}




#bar-fr .bar {
	background-color: #525454;
	grid-column: 1/-2;
}

#bar-es .bar {
	background-color: #ffca00;
	grid-column: 2/-2;
}

#bar-en .bar {
	background-color: #949798;
	grid-column: 3/-2;
}


.bar-label {
	padding-left: 5px;
	font-weight: 700;
	grid-column-start: -2;
	width: 50px;
	text-align: center;
}

#bar-es .bar-label {
	color: #ffca00;
}

#bar-en .bar-label {
	color: #949798;
}

#word-cloud {
	max-width: 650px;
	width: 80%;
}

.left-item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}


/* Right part of main body */

#experiences {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 10px;

}

.experience-item {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 35px;
	justify-content: flex-end;
}

.exp-date {
	margin-right: 10px;
}


.exp-body {
	align-items: flex-start;
}

.exp-title {
	text-align: left;
}

.exp-loc {
	display: flex;
	align-items: center;
}

.exp-loc-title {
	background-color: #ffca00;
	color: white;
	font-size: 1em;
	font-weight: 700;
	padding: 2px;
}

.exp-loc-title:hover {
	color: #ffca00;
	background-color: white;
}

.exp-loc-title span {
	font-size: 0.9em;
	font-weight: 300;
}

.exp-loc-link {
	text-decoration: none;
	color: inherit;
}

.exp-sum-link {
	text-decoration: underline;
	font-weight: 700;
	color: #525354;
}

.exp-sum-link:hover {
	color: #ffca00;
}

.exp-loc-subtitle {
	margin-left: 3px;
	font-style: italic;
}

.exp-summary {
	font-size: medium;
	margin: 15px 0 15px 0;
}

.exp-summary ul {
	padding: 0;
	margin: 0;
}

.exp-summary ul li {
	margin-bottom: 10px;
}

.sum-bold {
	font-weight: 700;
}

.exp-tools {
	font-weight: 700;
}

.tools-bold {
	text-decoration: underline;
}

.exp-title-light {
	font-size: 0.7em;
}

#projects {
	margin-bottom: 35px;
}

.project-item {
	padding-left: 10px;
	font-size: 1.1em;
	margin-bottom: 20px;
}

.project-bold {
	font-weight: 700;
}

.project-separator {
	height: 0;
	width: 20px;
	border-top: 1.3px solid #525354;
	margin: 2px 0;
}

.project-loc {
	font-weight: 300;
	font-size: 0.8em;
}

#interests {
	padding-left: 10px;
	font-size: 1.1em;
}

/* FOOTER */

footer {
	background-color: #525354;
	min-height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	margin-top: 80px;
}

#footer-text {
	color: white;
	font-size: medium;
	text-align: center;
}

.footer-link {
	text-decoration: none;
	color: inherit;
	font-weight: 700;
}

.footer-link:hover {
	color: #ffca00;
}



/* Responsive rules */

@media (max-width: 490px) {

	#main-body {
		flex-direction: column-reverse;
	}

	#education {
		border: none;
	}

	.main-title, .first-title, #education-title {

		align-self: center;
		text-align: center;
	}

	#word-cloud {
		align-self: center;
	}
}

@media (max-width: 1000px) {
	#cv-down {
		position: unset;
	}
}

@media print {
	footer {
		display: none;
	}
}