html{scroll-behavior: smooth;/*pour les lein de redirection dasn la page*/ margin: 0px; }
body{
	border: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: white;
}
a{text-decoration: none;}
#back{
z-index: 1;
background-image: url(bg.png); 
background-size: cover;
background-attachment: fixed;

}


#topcontainer{
background-color: #2F2E2E;
padding: 5px;
font-family: sans-serif;
}

#topcontainer a{
	cursor: pointer;
	margin: 10px;
	color: #9A9A9A;
	transition-duration: 0.3s;
	padding-left: 10px;
	border-left: solid 1px;
}
#topcontainer ul{
	list-style: none;
}
#topcontainer a:hover{
	color: white;
	transition-duration: 0.3s;
}

#maincontainer{
	cursor: pointer;
	padding: 20px;
	margin-left: 25%;
	margin-right: 25%;
	margin-top: 10%;
	background-color: #2F2E2E;
	user-select: none;
	max-width: 100%;
}
#maintitle{
	text-align: center;
	font-size: 65pt;
	color: #FFFFFF;

}

#mainsubtittle{
	text-align: center;
	font-size: 14pt;
	font-family: sans-serif;
	font-weight: bold;
	color: #9A9A9A;
	letter-spacing: 3px;
}

#whitecontainer{
	z-index: 2;
	margin-top: 10%;

	background-color: #f6f6f6;
}

#articlecontainer{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: 20%;
	margin-right: 20%;
}
#article{
		flex: 1 1 275px;
	/*  Stretching: */
	flex: 0 1 275px;
	/*  No stretching: */
	border: solid rgba(47, 46, 46, 0.25) 1px;
	margin: 10px;
	display: flex;
  	flex-direction: column;
}
#article .label{display: flex;
	flex-wrap: wrap;
	 color: #9A9A9A;margin: 10px;}
#article .label img{border-radius: 50%; width: 30px; margin-right: 7px;}
#article .title{
	color: #2F2E2E; 
	font-size: 16pt;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}
#article .content{
	color: #767676; 
	font-size: 13pt;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}
#article .picture img{width: 100%;}

#article #bar .row, #article #bar .row hr{
	margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 0px;
    margin-top: 25px;
    color: rgba(47, 46, 46, 0.25);
}


#icons{
padding: 5px;
font-family: sans-serif;
display: flex;
}


#icons a{
	cursor: pointer;
	margin: 2px;
	color: #9A9A9A;
	transition-duration: 0.3s;
	padding-left: 10px;
}
#icons{
	list-style: none;
	display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;


}

#icons #right{
	display: flex;
    justify-content: flex-end;
    align-items: center;
}

#icons #left, #left a{
	display: flex;
    margin-right: 16px;
    overflow: hidden;
    align-items: center;
}

#bar{
	margin-top: auto;
}


@media screen and (max-width: 1400px) {
	#maintitle{
		font-size: 40pt;
	}
	#maincontainer{
		margin-left: 15%;
		margin-right: 15%;
	}
	#articlecontainer{
	margin-left: 5%;
	margin-right: 5%;}
}

@media screen and (max-width: 700px) {
	#maintitle{
		font-size: 30pt;
	}
	#mainsubtittle{
		font-size: 12pt;
	}
	#topcontainer ul{
		    padding-inline-start: 5px;

	}
	#topcontainer{
		font-size: 10pt;
	}
	#maincontainer{
		margin-left: 15%;
		margin-right: 15%;
	}
	#articlecontainer{
	margin-left: 5%;
	margin-right: 5%;}
}