@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	--color-black-darker: rgb(20,20,20);
	--color-black: rgb(50,50,50);
	--color-black-lighter: rgb(100, 100, 100);
	--color-primary: rgb(47, 42, 128);

	--margin-xxs:.25rem;
	--margin-xs:.5rem;
	--margin-s:.75rem;
	--margin-m:1rem;
	--margin-l:1.25rem;
	--margin-xl:1.75rem;
	--margin-xxl:2.5rem;

	--h-ff: Poppins, sans-serif;
	--h1: bold 1.75rem/1.2em var(--h-ff);
	--h2: bold 1.5rem/1.2em var(--h-ff);
	--h3: bold 1.25rem/1.2em var(--h-ff);
	--ff: Poppins, sans-serif;
	--xs: 0.8rem/1.8 var(--ff);
	--s: 0.9rem/1.6 var(--ff);
	--m: 1rem/1.4 var(--ff);
	--l: 1.1rem/1.2 var(--ff);
	--xl: 1.2rem/1 var(--ff);

	font-size:14px;
}

* {
	padding:0;
	margin:0;
	box-sizing:border-box
}
h1,h2,h3 {
	font: var(--h1);
	margin:auto;
}
h1 {
	font: var(--h1);
}
h2 {
	font: var(--h2);
}
h3 {
	font: var(--h3);
}

ul,
ol {
	padding-left: 2rem;
	list-style-type: square;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: rgb(250, 250, 250);
	padding: 1rem;
	padding-top: 3rem;
	max-width: 1400px;
	margin: auto;
	font: var(--m);
	color: var(--color-black);
	display: flex;
	gap: 3rem;

	> header {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8px;
		text-align: center;
		height: max-content;
		width: 100%;
		max-width: 320px;
		margin:auto;
		margin-top: 0px;

		>div {
			padding: 1rem;
		}

		.name-title {
			.name {
				color: var(--color-black-darker);
				font-weight: 600;
				font-size: 1.4em;
				margin-bottom: 0.5rem;
			}

			.title {
				font-size: 1em;
				font-weight: 500;
				color: var(--color-primary);
			}
		}

		.image {
			img {
				object-fit:cover;
				height:100%;
				width: 90%;
				max-width: 180px;
				border-radius: 100%;
			}
		}

		.infos {
			color: var(--color-black-lighter);
			font-weight: 500;
			width: max-content;
			margin: auto;
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			&>div {
				display: flex;
				gap:0.5em;
			}
		}
	}

	main {
		display: flex;
		flex-direction: column;
		gap: 2em;

		section {
			> header {
				margin-bottom: 1rem;
				h2 {
					color: color: var(--color-black-darker);
					font-weight: 600;
					font-variant: small-caps;
					display: flex;
					gap: 0.5em;
				}
			}

			>div  {
				background-color: white;
				font: var(--m);
				color: rgb(80, 80, 80);
				padding: 1.5rem;
				border-radius: 1rem;
			}

			.experience {
				display: flex;
				margin-block: 2rem;
				gap: 2rem;

				.period {
					width: min-content;
					display: flex;
					gap:1rem;
					margin-top: 0.25rem;
					flex-direction: column-reverse;
					justify-content: space-between;
					align-items: center;
					font-size: 0.8em;
					color: var(--color-black-lighter);
					.line {
						border-right: dashed 1px;
						height: 100%;
					}
				}

				.content {
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 1em;
					height: 100%;
					header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgb(50, 50, 50);
						.location {
							color: var(--color-primary);	
						}
					}
					.description {
						display: flex;
						flex-direction: column;
						gap: 1em;
						color: var(--color-black-lighter);

					}
					.certificate {
						font-weight: 600;
						color: green;
						i {
							margin-right: 0.3em;
						}
					}
				}
			}

			&#skills {
				.content {
					display: flex;
					flex-direction: column;
					gap: 0.75rem;
					.skill-group {
						display: flex;
						gap: 0.5rem;
						.label {
							width: 180px;
							font-weight: 600;
							font-size: smaller;
						}
						&.legend {
							margin-top: 0.75rem;
							span {
								font-size: smaller;
							}
						}
						@media all and (max-width:1100px) {
							flex-direction: column;
						}

						@media all and (min-width: 1100px) {
							flex-direction: row;
						}
					}
				}
			}

			.skill-list {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				gap: 0.25rem 1rem;
				span {
					display: inline-block;
					font: var(--s);
					width: max-content;
					padding: 3px 10px;
					border-radius: 4px;
					height: max-content;
					&.confirmed {
						background-color: rgb(100, 255, 150);
						color: rgb(80, 80, 80);
					}
					&.intermediate {
						background-color: rgb(210, 255, 210);
						color: rgb(80, 80, 80);
					}
				}
			}	
		}
	}
}

@media all and (max-width:900px) {
	body {
		flex-direction: column;
	}
}

@media all and (min-width: 900px) {
	body {
		flex-direction: row;
	}
}