/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*
 ________              ________  ________  ___       ___       ________      ___    ___ 
|\   __  \            |\   ____\|\   __  \|\  \     |\  \     |\   __  \    |\  \  /  /|
\ \  \|\ /_           \ \  \___|\ \  \|\  \ \  \    \ \  \    \ \  \|\  \   \ \  \/  / /
 \ \   __  \           \ \  \  __\ \   __  \ \  \    \ \  \    \ \   __  \   \ \    / / 
  \ \  \|\  \ ___       \ \  \|\  \ \  \ \  \ \  \____\ \  \____\ \  \ \  \   \/  /  /  
   \ \_______\\__\       \ \_______\ \__\ \__\ \_______\ \_______\ \__\ \__\__/  / /    
    \|_______\|__|        \|_______|\|__|\|__|\|_______|\|_______|\|__|\|__|\___/ /     
                                                                           \|___|/    
*/

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/


:root {
		/* -----------------Clear theme-----------------*/
		/*elements*/
	--Background: #fffffe;
	--Headline:	#094067;
 	--Paragraph: #5f6c7b;
	--Button: #3da9fc;
	--Button text: #fffffe;
		/*Illustration*/
	--Stroke: #094067;
	--Main: #fffffe;
	--Highlight: #3da9fc;
	--Secondary: #90b4ce;
	--Tertiary: #ef4565;

}


html[data-theme='dark'] {
		/* -----------------dark theme-----------------*/
		/*elements*/
	--Background: #232946;
	--Headline:	#fffffe;
 	--Paragraph: #b8c1ec;
	--Button: #eebbc3;
	--Button text: #232946;
		/*Illustration*/
	--Stroke: #121629;
	--Main: #b8c1ec;
	--Highlight: #eebbc3;
	--Secondary: #fffffe;
	--Tertiary: #eebbc3;
	
}

/* Reset */
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td { 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
	background-color: var( --Background);
	background-size: 100% 100%;
	font-size: 10px;   
	font-family: 'Archivo', "Gill Sans Mt", Arial, sans-serif;
	scroll-behavior: smooth;
}

/*--------------------------------------------------*/
		/*FONTS MATTERS ONLY :*/
/*--------------------------------------------------*/
/*	
	Font size table (Browser default 16px)

	pixels      relative
	--------------------
	36px        2.25em
	31px        0.5161em
	24px        1.5em
	21px        1.3125em
	18px        1.125em
	16px        1em
	14px        0.875em
	12px        0.75em
	11px        0.6875em
	10px        0.625em
	9px         0.5625em
	--------------------
*/

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|PT+Serif&display=swap');


h1{
  font-size: 3.5em;
 }

h2{
  font-size: 2.5em;
    }
	
	
h1, h2{
	font-family: 'Playfair Display', 'Archivo', "Gill Sans Mt", Arial, sans-serif;
	}
h1, h2{
	font-weight:black;
}
.nav-link{ 
	font-size: 2em;
	font-weight:bold;  
}
#fig-caption{
	font-style: italic;
}
p{
  font-size:1.5em;
  font-family: "Spectral",'Playfair Display', serif, "Baskerville","Liberation-Serif", Times, serif;
  font-weight: light;
  }


 /*--------------------------------------------------*/
		/*CONTENT FEATURES POSITIONs :*/
/*--------------------------------------------------*/


  h1,h2{
	margin: 0.75em;
	text-align:left;
  } 

  p{
	text-align:justify;
	margin: 1em 0 1em 0;
	text-indent: 2.5em;
  }  
	
/*--------------------------------------------------*/
/*--------------------------------------------------*/
		/*Proper construction features features :*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/


/*--------------------------------------------------*/
		/*STATIC features :*/
/*--------------------------------------------------*/

/*.flex-container{
 display: flex;
 justify-content: center;
 width: 100%;
 margin: 0 auto;
 
}
*/

#header{
	position: -webkit-sticky;
	position:sticky;
	top: 0;
	background: var( --main-gray);	
	border-bottom: 1px solid white;
	width:100%;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: flex-start;
	
	z-index: 99;
	
 }

/*Footer and header img have same rule*/

#header-img, #footer-img{
  min-height: 40px;
  max-height: 15vh;
  max-width: 100px;
  margin: 5px 15px 5px 15px ;
  border-radius:2%;
    }
	
#footer-img{
  box-shadow: 0em 0.2em 0.5em rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.1);
    }


#nav-bar{
  display: flex;
  flex-wrap: unwrap;
  flex-direction: row;
  justify-content: space-evenly;
}
  



.nav-link{
  padding: 10px 15px 9px 15px !important;
}
.nav-link:hover {
  background-color: var(Highlight);
  }

.nav-link:active {
  color: var(--Tertiary);
  box-shadow: 0 2px #666;
  transform: translateY(1px);
  background-color: lightgrey;

}
a:visited {
  color: var(--Headline);
}

.nav-link:link{
  color:black;
  text-decoration: none;
}

 main{
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0 10vw 0 10vw;
	padding: 10px 10vw 10vh 10vw;
	background-color: white;
	border-left: 1px outset lightgrey;
	border-right: 2px outset lavender;
	border-bottom: 2px outset lavender;
	border-radius:0 0 10px 10px;
 

	> p{
		flex: 1;
		display: flex;
		justify-content: center;
		align-self: center;
			}
 }

#footer{
 flex-wrap: wrap;
 justify-content:center;
 bottom: 0;
 display: flex;
 flex:1;
 align-items: center;
 width:100%;
 margin:50px 0 0 0;
	}
	#footer>div{
		justify-self: end;
		}


/*--------------------------------------------------*/
		/*CONTENT features :*/
/*--------------------------------------------------*/

.embedded_media{
	 display: flex;
     max-width:100%;
	 justify-content: center;
	 align-self: center;
	 margin-left:auto;
	 margin-right:auto;
	
}

#video{}

#carte{}
 
 #fig-caption {
 display: flex;
 justify-content: center;
 margin-bottom: 10px;
 }
#form{}

#email{}

#submit{}

#activites{}

#curriculum{}

/*-----------------------------------------------------------------------------*/
		/* @media rules :*/
/*-----------------------------------------------------------------------------*/


 /* Mobile Styles */

@media only screen and (max-width: 446px) {
	
	h1{text-align: center;
	position: -webkit-sticky;
	position:sticky;
	top:0;
	background-color:whitesmoke;
	margin:0 0 0 0;
	width:100%;
	font-size: 1.5em;
	padding: 4px;
	}
	 
	#header {
    flex-wrap: wrap;
    justify-content: center;
	position:relative;
    }
	#header-img{
		margin:0 0 0 0;
	}
  .nav-link{
   
	}
  
  main{
  margin: 0 10px 0 10px;
  padding: 10px 10px 10vh 10px;
  	}
  
  .embedded_media{
	display: flex;
    flex:1;
	width:100%;
 }
#video{
    
}
#carte{
	
}	
 
}

/* Tablet Styles */
@media only screen and (min-width: 447px) and (max-width: 960px) {
	h1{text-align: center;
	}

  #header {
    flex-wrap: wrap;
    justify-content:center;
    }
  .nav-link{
   
  }
  
  main{
  margin: 0 5vw 0 5vw;
  }
  
  .embedded_media{
	display: flex;
    flex:1;
	width:100%;
 }
#video{
    
}
#carte{
	
}	
 
 
 
}

/* Desktop Styles *//*
@media only screen and (min-width: 961px) {
 
}


/*


@media (max-width: 500px) {
  #header {
    flex-wrap: wrap;
    justify-content:center;
    }
  .nav-link{
   
  }
  
  main{
  margin: 0 5vw 0 5vw;
  }
  
  .embedded_media{
	display: flex;
    flex:1;
	width:100%;
 }
#video{
    
}
#carte{
	
}	
 }