@page { /* min(A4,Letter) = A4.width x Letter.height */
	size: 210mm 279mm;
	margin: 0mm;
}

@font-face {
    font-family: "Noto Emoji";
	font-style: normal;
	font-weight: 400;
	src: local("Noto Emoji"), local("NotoEmoji-Regular");
    unicode-range: U+1F000-1FFFF, U+20000-2FFFF; /* Simplified unicode range, may not include all */
}

@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 700;
	src: local("Literata-Bold"), local("Literata");
}

@font-face {
	font-family: "Selawik";
	font-style: normal;
	font-weight: 700;
	src: local("Selawik Bold"), local("Selawik"), url("fonts/selawkb.ttf");
}

@font-face {
	font-family: "Selawik";
	font-style: normal;
	font-weight: 600;
	src: local("Selawik Semibold"), local("Selawik"), url("fonts/selawksb.ttf");
}

@font-face {
	font-family: "Selawik";
	font-style: normal;
	font-weight: 400;
	src: local("Selawik"), url("fonts/selawk.ttf");
}

@font-face {
	font-family: "Selawik";
	font-style: normal;
	font-weight: 300;
	src: local("Selawik Light"), local("Selawik"), url("fonts/selawkl.ttf");
}

:root {
	--light-weight: 300;
	--normal-weight: 400;
	/* some fonts provide 500, some fonts provide 600 */
	--semibold-weight: 600;
	--bold-weight: 700;

	--title-size: 36pt;
	--contact-size: 14pt;
	--common-print-size: 12pt;
	--section-size: 10pt;
	--entry-info-size: 9.5pt;
	--edutitle-size: 9pt;
	--oneline-date-range-size: 9pt;
	--related-size: 8.5pt;
	--section-title-size: 8pt;
	--details-size: 8.5pt;
	--tags-size: 7.5pt;
	--loc-size: 7pt;
	--consent-size: 6pt;
}

.personal-info {
	--details-size: 8pt;
}

.skills {
	--tags-size: 8pt;
}

body {
	background-color: gray;
	padding: 10px 0px 0px 10px;
	font-size: var(--common-print-size);
	font-family: "Segoe UI", "Selawik";
	text-underline-offset: 1pt;
	text-decoration-thickness: 0.5pt;
}

* { /* inherit what is not inheritable by default */
	text-decoration-thickness: inherit;
}

/* make pages centered */
main { text-align: center; }

.page-border {
	display: inline-block;
	border: 1px solid #666;
	margin: 0px 10px 10px 0px;
	vertical-align: top;
}

.page { /* common printer margin: 0.25" = 6.35mm */
	aspect-ratio: 210/279;
	display: block;
	width: 210mm;
	height: 279mm;
	padding: 7mm;
	background-color: white;
}

.page-printable { /* (210-7*2) x (279-7*2) */
	aspect-ratio: 196/265;
	/* background-color: #f0f0d0; */
	padding: 6mm 12mm;
	width: 100%;
	text-align: left;
}

.page-content { /* (210-19*2) x (279-13*2) */
	position: relative;
	aspect-ratio: 172/253;
	/* background-color: #d0f0d0; */
	width: 100%;
}

.page-content::after {
	content: "I consent to the processing of my personal data presented in this CV by any company for the purposes of recruitment processes I am participating in currently or will be in the future.";
	display: block;
	position: absolute;
	font-size: var(--consent-size);
	bottom: -2em;
	width: 100%;
	text-align: center;
}

section>header {
	background-color: #ddd;
	text-transform: uppercase;
}

section>header span {
	font-size: var(--section-title-size);
	line-height: var(--section-title-size);
	vertical-align: 1pt;
}

section>header::before {
	position: absolute;
	width: 1.5em;
	left: -1.5em;
	text-align: center;
	background-color: #ddd;
	font-family: "Noto Emoji";
}

section>header::after {
	content: "";
	position: absolute;
	height: calc(1.3* var(--section-size));
	width: 1.5em;
	left: 100%;
	text-align: center;
	background-color: #ddd;
	font-family: "Noto Emoji";
}

.title {
	text-align: center;
	font-weight: var(--semibold-weight);
	font-size: 12pt;
	height: 6mm;
}

.personal-info>header::before { content: "👤"; }
.skills>header::before { content: "🎯"; }
.work-exp>header::before { content: "💼"; }
.education>header::before { content: "🎓"; }
.techstack>header::before { content: "🛠"; }

.w38 { display: inline-block; vertical-align: top; width: 37.5%;
	   margin-left: 0.5%; }
.w44 { display: inline-block; vertical-align: top; width: 43.5%;
	   margin-left: 0.5%; }
.w83 { display: inline-block; vertical-align: top; width: 83%; }

.w49 { display: inline-block !important; vertical-align: top; width: 49%;
	   margin-left: 0.5%; }

.qrcode {
	display: block;
	position: absolute;
	/* width: 18%; */
	width: 17%;
	right: 0;
	/* top: 4.7mm; */
	image-rendering: pixelated;
}

.qrcode > img        { display: block; width: 100%; }
.qrcode > img:hover  { content:url(qart-name.png); }
.qrcode > img:active { content:url(qart.gif); }

section {
	font-size: var(--section-size);
	line-height: calc(1.3 * var(--section-size));
}

section div { display: inline-block; }

section table { width: 100%; }

.right { text-align: right; }

ul.tags {
	margin: 1mm 0 2mm;
	padding: 0;
	font-size: var(--tags-size);
	line-height: calc(1.2 * var(--tags-size));
	color: white;
}

ul.tags.skills {
	margin: 1mm 0 0mm;
}

.skills li { background-color: #eee; }

ul.tags li {
	display: inline-block; margin: 2pt 1pt 2pt; padding: 1pt 2pt 0pt;
	border: 0.5pt solid darkgray;
	white-space: nowrap;
	color: black;
}

ul.tags li::before {
	content: "";
	display: block;
	position: relative;
	left: -4pt;
	top: -3pt;
	width: 3.5pt;
	height: 3.5pt;
	aspect-ratio: 1/1;
	margin-bottom: -3.5pt;
	transform: rotate(45deg);
	background-color: #999;
}

ul.tags li.arch::before { background-color: #cc6; }
ul.tags li.lang::before { background-color: #6c6; }
ul.tags li.lib::before  { background-color: #6cc; }
ul.tags li.proj::before { background-color: #66c; }
ul.tags li.tech::before { background-color: #c66; }
ul.tags li.tool::before { background-color: #c6c; }

.personal-info th {
	font-weight: var(--light-weight);
	text-align: right;
	padding: 0pt 1pt;
}
.personal-info td { font-weight: var(--semibold-weight); }
.techstack table  { border-spacing: 0; }
.techstack     th { font-weight: var(--normal-weight);
                    font-size: var(--details-size);
				    text-align: right; }
.techstack     td { font-weight: var(--light-weight); }
.techstack ul.tags { margin: 0; }

a       { text-decoration-line: none; color: #008; }
a:hover { text-decoration-line: underline; }

.lighter { font-weight: var(--light-weight); }

.name { font-weight: var(--bold-weight); border: 1pt dashed black; padding: 0 3pt 1pt; border-radius: 6pt; }

.personal-info td.edutitle { font-size: var(--edutitle-size); }
.personal-info td.edutitle a { color: black; }

td.contact {
	font-family: "Italianno", serif;
	font-size: var(--contact-size);
	font-weight: var(--normal-weight);
	/* protection for Firefox PDF */
	-moz-font-feature-settings: "liga" 1;
}

td.contact span::before {
	/* protection for web */
	content: "f";
}

.entry {
	display: block;
	margin-top: 1mm;
	margin-bottom: 2mm;
}

.entry::after {
	content: "";
	display: block;
	width: 12%;
	margin-top: 2mm;
	border-bottom: 0.5pt solid gray;
}

.date-years {
	position: relative;
	width: 0;
	color: #ccc;
	/* vertical-align: bottom; */
	transform: translate(-2pt,-2pt) rotate(-90deg);
	transform-origin: bottom left;
	text-transform: uppercase;
	font-size: var(--loc-size);
}

.date-range {
	width: 17mm;
	text-align: right;
	color: #555;
}

.date-range span { white-space: nowrap; }

.info {
	font-size: var(--entry-info-size);
	width: 152mm;
	margin-left: 3mm;
	vertical-align: top;
}

.w49 > .info {
	width: 64mm;
}

.date-range2 {
	width: 31mm;
	text-align: right;
	color: #888;
	font-size: var(--oneline-date-range-size);
}

.info2 {
	font-size: var(--entry-info-size);
	width: 138mm;
	margin-left: 3mm;
}

.info span.place {
	/* font-weight: var(--semibold-weight); */
	/* text-decoration-line: underline; */
	font-weight: var(--bold-weight);
}

.info span.rename {
	font-size: 6pt;
	line-height: 8pt;
	font-weight: var(--light-weight);
}

.info span.loc, .info2 span.loc {
	font-size: var(--loc-size);
	font-weight: var(--normal-weight);
	line-height: 0;
	margin: 0 1pt;
}

.pos {
	font-weight: var(--semibold-weight);
}

.mode {
	border: 0.5pt dashed #666;
	color: #666;
	font-size: 5pt;
	padding: 1pt;
	vertical-align: middle;
	line-height: 0;
}

.details {
	display: block;
	margin: 1mm 0 1mm;
	font-size: var(--details-size);
	line-height: 11pt;
}

.details i {
	font-size: var(--consent-size);
	vertical-align: top;
}

.info span, .details span { font-weight: var(--semibold-weight); }

.normal  { font-weight: var(--normal-weight); }

p { margin: 2pt 0; }

.related {
	display: block;
	margin: 2pt 0;
	font-size: var(--related-size);
	line-height: 10pt;
	font-weight: var(--light-weight);
}

.related .type {
	text-decoration-line: underline;
	text-decoration-thickness: 0.25pt;
}

.related .hide {
	color: white;
	display: block;
	font-size: 2pt;
	line-height: 0;
}

.related ul.text {
	margin: 0;
	padding: 0 0 0 12pt;
}

@media print {
	body {
		background-color: transparent;
		padding: 0;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		/* no ligatures needed for PDFs from Firefox (Save to PDF) to be
		   fully searchable. */
		-moz-font-feature-settings: "liga" 0;
	}

	.page-border        { border: 0; margin: 0; }
	.page               { break-inside: avoid; background-color: transparent; }
	a                   { text-decoration-line: none; color: black; }
	.qrcode > img:hover { content:url(qart.png); }
}