body {
 /* ForV2: Size has been simplified for V1.0
* Everything works with 900 px for my current configuration */
	min-width: 900px;
	max-width: 100em;
	width: 60em;
	margin: auto;
	
	/* Need to emulate a paper sheet for understanding the printing version */
	padding: 1em;
	background: white;
	min-height: 100vh;
	margin-top: 1em;
	
	border: 1px solid lightgray;
}

main {
	min-height: 100vh;
	padding: 1em 2em;
}

/* Header including title, personal data and picture*/
header {
	display: flex;
	flex-flow: nowrap; /* Default but JiC */
	margin: 1em 2em;
	
	/* When taking out the picture...
	* margin: 2em auto;
    * width: 80%;
	*/
	
/* Works above 850 px with my current configuration; 50em should work? (TEST) 
	min-width: 50em;*/
}


div#mainTitle {
	flex: 4;
	order: 1;
	
	min-width: 60%
}


/* Original with tables & sections */
/******************************/
table, tr { width: 100%; } /*100%parent*/
section {
	margin-bottom: 3em;
    display: block;
}


h4.sectionTitle {
/*	text-align: center;*/
margin-left: 10%;
}

h4.sectionTitle:before {
    content: " ";
    display: inline-block;
    margin: 0 1em 0.3em 10px; /* Be Careful with the left margin */
    width: 10%;
	height: 0px;
	border: 3px solid /*MainColor*/RoyalBlue;
}

/*h4.sectionTitle:after {
    content: " ";
    display: inline-block;
    margin: 0 1em 0.3em 10px; /* Be Careful with the left margin * /
    width: 10%;
	height: 0px;
	border: 3px solid /*MainColor* /RoyalBlue;
}
*/



section#Experience tr.detail td {
	padding-top: 2em;
}




/* Nov'24 -- Compacting styles */

.direct_report {
	visibility: hidden;
	display: none;
}

.remove_me {
	color: red;
}

.two-column-list {
    column-count: 2; /* Set the number of columns to 2 */
    column-gap: 10px; /* Add space between columns */
    list-style-position: inside; /* Keep bullet points inside the list */
/*    padding: 0; /* Remove default padding */
/*    margin: 0; /* Remove default margin */
}



/*********** nov24 ************/
#qrcode-top {
	width: fit-content;
    height: fit-content;
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    margin: auto 1em;
}
#qrcode {
    min-height: 50px;
    height: auto;
    width: auto;
}

div#personalData {
	flex: 2;
	order: 2;
	
	margin: auto 2em;
	min-width: 200px;

	display: inline-flex;

	ul, div {
		margin-top: auto;
	    margin-bottom: auto;

	    z-index: 1;
	}

	/* letters ahead of qr due to white frame */
	ul {
        z-index: 50;
	}
}

/* Flex skill boxes */

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skills-grid section {
    flex: 1 1 calc(50% - 10px);
}