/*833*/
body 
{
	/* TYPO */
	font-family: 'Archivo', sans-serif;
	font-size: 1.2em;
	color: #f2f2f2;
	line-height: 1.4em;
	font-weight: 300;

	/* FOND */
	background-color: #121212;
	min-height: 100%;
	max-width: 100%;
}

#conteneur
{
	display: flex;
	max-width: 100%;
	min-height: 100%;
	overflow-x: hidden;
}

.about
	{
	position: relative;
	left: 0;
	min-width: 100%;
	padding-left: 2px;
	padding-right: 3px;

	padding-top: 10px;
 	padding-bottom: 10px;

  	overflow-y: auto;
  	height: 100%;

  	scrollbar-width: thin;
	}


header
{
	padding-left: 20px;
}

img
{
	max-width: 100%;
	margin-bottom: 20px;
}

h1
{

font-weight: 300;
font-size: 1.6em;
padding-left: 20px;

}

nav 
{
	font-size: 1.2em;
	line-height: 1.4em;
	padding-left: 20px;
	padding-right: 20px;
}

a
{
	text-decoration: none;
	color: #f2f2f2;
}


a:hover
{
	color: #717171;
	font-style: italic;
}

.bouton
	{
	display: inline;
	position: fixed;
	width: 2.5em;
	right: 1em;
	top: 1em;

	transform: rotate(45deg);

	}

	.bouton:hover
	{
		opacity: 25%;
	}

.en-cours
{
	color: #FF5733;
}

/********************************/
.txt

{
	padding-left: 20px;
	padding-right: 20px;
}

.info /* border a propos + contact + footer */
{
	border-top: 1px #f2f2f2 solid;
}

/******************************/

footer
{
	font-size: 0.7em;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 20px;
}



/**********************************************************************/
/* TOUTS PETITS ECRANS */
@media all and (max-width: 320px)
{
	body
	{
		font-size: 1em;
	}

	h1
	{
		font-size: 1.4em;
	}

	nav
	{
		font-size: 1em;
	}
}

/* DESKTOP & GRANDES FENETRES */
@media all and (min-width: 1280px)
{
	.txt
	{
		width: 55%;
	}
}