:root {
	--main-defRadius: 3px;
	--main-navFontSize: 16px;
	--main-contFontSize: 16px;
	--main-pageBkgrndColor: #2f2771;
	--main-transitionSpeed: 0.45s;
	--main-transitionTiming: ease;
	--main-textFont:'Anybody', cursive;
	--main-textWeight: 400;
	--main-linkWeight: 500;
	--main-linkColor: var(--main-pageBkgrndColor);
	--main-menuFont:	'Baloo 2', cursive;
	--main-footerFont: 'Maven Pro', sans-serif;
}

html {
}

body {
	font-family: var(--main-textFont);
	font-weight: var(--main-textWeight);
	margin: 0px;
	padding: 0px;
	width:100%;
	background-color: var(--main-pageBkgrndColor);
}

a {

	text-decoration: none;
	color:var(--main-linkColor);
	font-weight:var(--main-linkWeight);
}

.divider {
	border: 3px solid var(--main-pageBkgrndColor);
  	border-radius: 3px;
}

h1 {
	font-size: 28px;
	text-transform:uppercase;

}

h2 {
	font-size: 22px;
	text-transform:uppercase;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 15px;
}

.imgWithMargin{
	margin:10px;
}

p {
	line-height:22px;
}

/*-------------------------------------*/
/* NAVBAR STYLING
/*-------------------------------------*/
.navbar {
	position: relative;		
	display:flex;			
	flex-wrap: wrap;		
	background-image: linear-gradient(180deg,var(--main-pageBkgrndColor),white);	
}

#navbar-top {
	padding-top:0px;
	padding-right:0px;
	padding-bottom: 20px;
	padding-left: 0px;

}

.navbar-brand {
	padding: 0px;		
	margin-top: 20px;
	margin-left:20px;
	margin-right:20px;
	font-family: var(--main-textFont);
	font-size: 20px;		
	font-weight: 500;		
	color:white;			
	text-shadow: 1px 1px black;				
}

.navbar-brand:hover{
	color:white;
}

/* barre lorsque burgerstyle*/
.navbar-nav{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 0px;
	margin-bottom: 2px;
}

#HamburgerMenu{
margin-right:3vw;
color: 	var(--main-pageBkgrndColor);
font-size: :12px;
border-color: var(--main-pageBkgrndColor);
outline-color: var(--main-pageBkgrndColor);
border-radius: 5px;

}


.dropdown{
	text-align: center;
}

.dropdown-menu{
	background-color: var(--main-pageBkgrndColor);				
	border-radius: var(--main-defRadius);	
}

.dropdown-item{
	background-color: var(--main-pageBkgrndColor);				
	border-radius: var(--main-defRadius);	
	transition-duration: var(--main-transitionSpeed);					
	transition-timing-function: var(--main-transitionTiming);
	color:white;						
	font-size: var(--main-navFontSize);
}	


/*-------------------------------------*/
/* Button Styling
/*-------------------------------------*/


.btn {

	border-radius: var(--main-defRadius);
	transition-duration: var(--main-transitionSpeed);					
	transition-timing-function: var(--main-transitionTiming);
	color:whitesmoke;
	border-style: none;
	font-family: var(--main-menuFont);
	font-weight: 400;
	font-size: var(--main-navFontSize);
	text-shadow: 1px 1px black;				
	text-transform:uppercase;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:5px;
    --bs-btn-bg: .bg-opacity-0;
    --bs-btn-active-bg: var(--main-pageBkgrndColor);
    --bs-btn-active-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-line-height:30px;
}

.btn:hover {
	background-color: var(--main-pageBkgrndColor);
	border-radius: var(--main-defRadius);
	transition-duration: var(--main-transitionSpeed);					
	transition-timing-function: var(--main-transitionTiming);
	color:white;
	text-shadow: 1px 1px black;				
}


/*-------------------------------------*/
/* Content Styling
/*-------------------------------------*/

#content.container-fluid	{
	text-align: center;
	overflow: auto;
	background-color: white;
	margin:auto;
	padding-top: 2vh;
	padding-right:10vw;
	padding-left:10vw;
	padding-bottom: 2vh;
	font-size:var(--main-contFontSize);
}

.product_title {
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 18px;
	background-color: var(--main-pageBkgrndColor)	;
	font-weight: 400;
	color:white	;
	text-shadow: 1px 1px black;				
}

#ProduitsCouture:hover{
	font-size: 1.1em;
	transition-duration: var(--main-transitionSpeed);					
	transition-timing-function: var(--main-transitionTiming);
	font-weight: ;
}

#ProduitsCafe:hover{
	font-size: 1.1em;
	transition-duration: var(--main-transitionSpeed);					
	transition-timing-function: var(--main-transitionTiming);

}

/*-------------------------------------*/
/* Footer Styling
/*-------------------------------------*/

#footer {	
	font-family: var(--main-footerFont);
	font-weight: var(--main-linkWeight);
	color:white;
	position: relative;
	background-color: var(--main-pageBkgrndColor);
	padding-top:0px;

}

#footer a{
	font-size: 12px;
	color:white;		
}

#footer li{
	font-size: 12px;
	list-style: none;
	margin:0px;				
}

#footer ul{
	padding:0px;		
	margin:0px;		
}

#footer-left{
	text-align: left;
	padding-left: 10vw;
	padding-top:2vh;		
}


#footer-center{
	text-align: 	center;
	font-size: 10px;
}

#footer-center img {
	width:100%;
	height:auto;
	aspect-ratio: 16/9;
	margin-top:0;
	padding-top:0;
	}

#footer-right{
		text-align: right	;
		padding-right: 10vw;	
		padding-top:2vh;		
}


#footer-bottom{
	font-size: 10px;
	padding-top: 2vh;		
	padding-bottom: 2vh;		
	text-align: center;		
}


/*-------------------------------------*/
/* Special applications
/*-------------------------------------*/
.hideElement {
	display: none;
}

/*-------------------------------------*/
/* Media Queries
/*-------------------------------------*/
@media (max-width:991px) {

	
}


@media (max-width:767px) {

	.btn {
		margin-left:0px;
		margin-right:0px;
		margin-top:1px;
		margin-bottom:1px;
		padding-left: 40px;
		padding-right: 40px;
		font-size: 1.5em;
		--bs-btn-line-height:35px;
	}

	.dropdown-item{
		margin-left:0px;
		margin-right:0px;
		margin-top:1px;
		margin-bottom:1px;
		padding-left: 40px;
		padding-right: 40px;
		font-size: 1.5em;
	}
	#footer-left{
			padding-left: 3vw;
			padding-top:1vh;		
	}

	#footer-center img {
		display:none;
	}

	#footer-right{
			padding-right: 3vw;	
			padding-top:1vh;		
	}

	#footer a{
		font-size: 10px;
	}

	#footer li{
		font-size: 10px;			
	}

	#footer-bottom{

		font-size: 8px;
	}
}