body {
	margin: 0;
	font-family: 'Share Tech', sans-serif;
	font-size:18px;
	color: #505050;
	background:#eee;
	overflow-x:hidden;
}

main a.ancre {
	display: block;
	font-size:10px;
	text-align: center;
	font-style: italic;
	color: #505050;
}

@media (max-width: 767px) {
	.markdown-body {
		padding: 15px;
	}
}

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          
		display: block;          
		display: revert !important; /* affichage des éléments */       
	 }        
	 
	 .u-no-mobile {          
		 display: none !important; /* masquage des éléments */        
	 }
	
	/* Un message personnalisé */
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}	

/**********************************************/
/**********************************************/
/*CV light*/
.cv {
	margin: 0 auto;
	text-align: center;	
}

/**********************************************/
/**********************************************/
/*CV détaillé*/
.markdown-body {
	box-sizing: border-box;
	min-width: 200px;
	max-width: 980px;
	margin: 0 auto;
	padding: 45px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
	color: #08ADAB;
}

.tag-cloud {
  display: inline-block;
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  margin-top: 8px;
}

.tag-cloud-blue {
	background-color: #2196F3;
}  

.tag-cloud-green {
	background-color: #1eaf1d;
}  

.tag-cloud-orange {
	background-color: #eb943b;
}  

.tag-cloud-ciel {
	background-color: #53d7ea;
}  

.tag-cloud-pink {
	background-color: #f290e9;
}  

.tag-cloud-red {
	background-color: #e22a2a;
}  

/**********************************************/
/**********************************************/
/*Design*/
.wave {
	width:100vw;
	height:150px;
	position:fixed;
	bottom:0;
	fill:#1b7477;
	z-index:100;
}
#one {
	height:180px;
	fill:#8adbd3;
	width:120vw;
	left:-10vw;
}

#hex-holder {
	position:fixed;
	height:100vh;
	width:100vw;
	top:0;
	z-index:-1;
	pointer-events:none;
	font-size:60px;
}
#hex-holder .hex {
	position:fixed;
}
.hex, .hex:before, .hex:after {
	height:1em;
	width:.59em;
	border:solid;
	border-width:1px 0;
	border-radius:2px;
	box-sizing:border-box;
}
.hex:before, .hex:after {
	content:'';
	position:absolute;
	margin-top:-1px;
	margin-left:;
/*     color:#ccc; */
}
.hex:hover {
	transform:rotate(30deg);
}
.hex:before { 
	transform:rotate(60deg); 
}
.hex:after { 	
	transform:rotate(-60deg); 
}
.hex, .hex:before, .hex:after, .subtext {
	border-color:#bbb;
}

#uno {
	border-radius:4px;
	border:none;
	background: #08ADAB; 
	/*background:#5b8b8c;*/
	transform:rotate(-12deg);
	bottom:30vh;
	left:30px;
}
#uno:before, #uno:after {
	margin-top:0;
}

#hex-holder .hex:before, #hex-holder .hex:after {
	border:inherit;
	border-radius:inherit;
	background:inherit;
}

#dos {
	border-color:#1B7477;
	border-radius:3px;
	border-width:5px 0;
	font-size:100px;
	bottom:12vh;
	right:-20px;
	transform:rotate(7deg);
}

#dos:before, #dos:after {
	margin-top:-5px;
}