:root {
	--color-bg: whitesmoke;
	--color-bg-sheet: white;
	--color-bg-section: #e7ecef;
	--color-bg-blue: #004182;

	--color-txt-white: #ffffff;
	--color-txt-black: #000000;
}

html {
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--color-bg);

	body {
		height: 297mm;
		width: 210mm;
		margin: auto;
		position: relative;
		background-color: var(--color-bg-sheet);

		figure {
			display: flex;

			img {
				margin: 0 1.5mm 0 0;
			}

			figcaption {
				margin: 0;
			}
		}
	}
}



/* === HEADER === */

header {
	background-color: var(--color-bg-section);
	color: var(--color-txt-black);
	position: absolute;
	top: 10mm;
	right: 0;
	left: 0;
	height: 46mm;
	padding: 2mm 10mm 2mm 85mm;
	display: flex;
	flex-direction: column;
	justify-content: space-around;

	h1 {
		font-size: 9mm;
		margin: 0;
	}

	h2 {
		font-size: 6.5mm;
		margin: 0;
	}

	p {
		font-size: 4.5mm;
		margin: 0;
	}
}


/* === ASIDE === */

aside {
	background-color: var(--color-bg-blue);
	color: var(--color-txt-white);
	font-size: 4.5mm;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10mm;
	width: 66mm;
	padding: 10mm 2mm;

	& > img {
		width: 50mm;
		height: 50mm;
		margin: 0 8mm;
		border-radius: 50%;
	}

	h3 {
		font-size: 5mm;
		margin: 6mm 0 3mm 0;
	}

	#contact {
		figure {
			align-items: center;
			display: flex;
			margin: 3mm 0 0 0;

			img {
				height: 5.3mm;
				stroke: var(--color-txt-white);
			}
		}

		a {
			text-decoration: none;
			color: var(--color-txt-white);
		}
	}

	#skills {
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;

			li {
				display: flex;
				align-items: center;
				gap: 1.5mm;
				margin: 1.5mm 0;

				&::before {
					content: '';
					background: var(--color-txt-white);
					background-size: 100%;
					mask: url('assets/chevron-right.svg');
					flex-shrink: 0;
					height: 4mm;
					width: 4mm;
				}

				span {
					display: inline-block;
					width: 20mm;
				}

				img {
					margin: 0 1.5mm 0 0;
				}
			}
		}
	}
}


/* MAIN */

main {
	color: var(--color-txt-black);
	position: absolute;
	top: 65mm;
	right: 10mm;
	bottom: 10mm;
	left: 85mm;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 5mm;
	justify-content: space-around;

	section {
		padding: 2mm;
		background-color: var(--color-bg-section);

		h3 {
			font-size: 5mm;
			margin: 0 0 4.5mm 0;
		}

		article {
			border-left: 1mm solid var(--color-txt-black);
			margin: 3.5mm 0 0 0;
			padding: 0 0 0 2mm;

			h4 {
				display: flex;
				align-items: center;
				gap: 1.5mm;
				margin: 3.5mm 0 1.5mm 0;
				font-size: 4.4mm;

				&::before {
					content: '';
					background: var(--color-txt-black);
					background-size: 100%;
					mask: url('assets/chevron-right.svg');
					flex-shrink: 0;
					height: 4mm;
					width: 4mm;
				}

				&:first-child {
					margin-top: 0;
				}
			}

			h5 {
				margin: 0 0 2mm 0;
				font-size: 4mm;
			}

			p {
				font-size: 4.2mm;
				margin: 0;
			}

			&:last-child p {
				margin: 0;
			}
		}
	}
}