body{
margin:0;
padding:0;
overflow-x: hidden;
}


#main {
	
	width:100%;
	height:auto;
	min-height:900px;
	/*background-color:#B0D4D4;*/
	background-image: url(images/background.png);
	background-attachment: fixed;
	padding:0%;
	margin:0;
	text-align:justify;
	word-wrap : break-word;
	font-family:'Varela Round', sans-serif;
	/*font-family:'Roboto', sans-serif;*/
	letter-spacing:-0.2px;
 	font-size: 1.2rem;
	color:black;
}

#main_b {
	
	width:99%;
	height:auto;
	min-height:900px;
	background-color:#B0D4D4;
	padding:1%;
	margin:0;
	text-align:justify;
	word-wrap : break-word;
	font-family:'Roboto', sans-serif;
	letter-spacing:-0.2px;
 	font-size: 1.2rem;
	color:black;
}


#header
{	margin:0;
	padding:0;
	height:11%;
	position:sticky;
	top:0px;
	box-shadow: 0px 4px 4px grey;
	z-index:2;
	background-color:white;	
}


#grandtitre
{

    text-align:center;
	width:100%;
	height:100px;
	font-family: 'Lobster';
	font-size:4em;
	font-weight:bold;
	color:white;
	background-image: url(images/bandeau.png);	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	margin:0;
	border:0;
}

#grandtitre_b
{

    text-align:center;
	width:100%;
	height:auto;
	font-family: 'Roboto', sans-serif;
	font-size:4em;
	font-weight:bold;
	color:white;
	background-color:#C5BA8E;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	margin:0;
	border:0;
}

#menu 
{
	width:100%;
	height:5%;
}


#menu ul
{	list-style-type:none;
	margin:0;
	padding:0;
}
#menu ul li
{
		display:block;
		float:left;
		color:white;
		width:20%;
		/*font-family:lobster;*/
		font-family:'Varela Round', sans-serif;		
		font-size:1.2em;
		/*font-style:italic;*/
		font-weight:bold;		
		text-align:center;
		vertical-align:center;
		background-color:black;	
}

#menu ul li a
{
	text-decoration:none;
	color:white;

}

#menu ul li a:hover
{
	text-decoration:none;
	color:rgb(127,127,127);
	
}

#contenu
{
	width:auto;
	margin-left: 15%;
	margin-right:15%;
	text-align:left;
	display: flex;
	flex-direction: row;	
	word-wrap : break-word;
	/*font-family:'lobster';*/
	font-family:'Varela Round', sans-serif;
	font-size: 1.2em;
	color:black;
	padding:1%;
	font-weight: normal;
	font-size:1.2em;
	background-color:rgb(240,240,240);
	border-radius: 10px;
	box-shadow: 8px 5px 5px grey;
	
}

.baretitre {inherit; width:30%; height:30%;margin-left:35%;}

.texteintro{
	width:58%;margin-left:10%;margin-right:10%;text-align:left;font-family:'Varela Round', sans-serif;
	text-align:left;
	}
	
.texteintro2{width:auto;margin-left:20%;margin-right:20%;text-align:left;
color:black;
	/*font-style: italic;*/
	font-weight: normal;
	font-size:1.2em;
	padding: 15px;
	background-color:#f0f0f0;
	border-radius: 10px;
	box-shadow: 8px 5px 5px grey;
	}

#photoid{	width:40%;
			margin: 0;}
			
#photoid img {width:99%;
				box-shadow: 10px 5px 5px grey;
				border-radius: 30px;				
				margin:0; }
				

#presentation {
				display: flex;
				flex-direction: row;
}





#logiciels{	width:100%;
			height:15%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			gap: 5px;
			text-align:center;
			word-wrap : break-word;
			font-family:'Roboto', sans-serif;
			font-size: 1.2rem;
			color:black;
			padding:0;}
			
#logiciels img {
			width:100%;
			justify-content: center;
			align-items: center;
			border-radius: 15px;
			box-shadow: 5px 5px 5px grey;
			}
			
    .creations, .competences {
        flex-direction: row;
    }

#competences{width:100%;
			height:21%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			gap: 15px;
			margin:1%;
	}
	
#cible_competences:target {
    padding-top: 7em; 
    margin-top: -7em; 
}
			
.comp {
			width:29%;
			height:99%;
			justify-content: left;
			text-align:left;
			color:black;
			align-items: center;
			border-radius: 10px;			
			box-shadow: 5px 5px 5px grey;	
			background-color:rgb(240,240,240);
			padding:1%;			}			

#cible_creations:target {
    padding-top: 7em; 
    margin-top: -7em; 
}
	

#creations{	width:100%;
			height:auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			text-align:center;			
			margin:1%;
			gap: 15px;}
			
.crea {
			font-size:1.3em;
			font-weight: 900;
			justify-content: center;
			width:49%;
			max-width:49%;
			align-items: center;
			text-align:center;
			margin:auto; }
	

.crea img { display:block;
			box-shadow: 8px 5px 5px grey;
			width:55%;
			align-items: center;
			border-radius: 30px;				
			margin:auto; }	

.crea video{width:90%;}

.crea p{ 
	opacity: 0;
	margin-left:15%;
	width:70%;
	display:block;
	text-align:left;
	color:white;
	font-family:'Varela Round', sans-serif;
	/*font-style: italic;*/
	font-weight: normal;
	font-size:0.8em;
	padding: 15px;
	background-color:white;
	border-radius: 10px;
	box-shadow: 8px 5px 5px white;
	}
.crea:hover p{ 
	opacity: 1;
	margin-left:15%;
	width:70%;
	display:block;
	font-family:'Varela Round', sans-serif;
	text-align:left;
	color:black;
	/*font-style: italic;*/
	font-weight: normal;
	font-size:0.8em;
	padding: 15px;
	background-color:#f0f0f0;
	border-radius: 10px;
	box-shadow: 8px 5px 5px grey;
	}


#cible_passions:target {
    padding-top: 7em; 
    margin-top: -7em; 
}
				
#passions{	width:100%;
			height:auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			margin:auto;
			
			}
			
.passions_bloc {padding:0;
				text-align:justify;	
				font-size:1.3em;
				width:48%;
			height:auto;				
				margin:1%;
				padding:0;
				align-items: center;
				z-index:1;
			}

.passions_bloc img {

			width:95%;
			border-radius: 30px;				
			margin:auto; }	

.passions_bloc p {
	height:auto;
			font-size:0.8em;
	font-family:'Varela Round', sans-serif;
	text-align:left;
	color:black;
	/*font-style: italic;*/
	font-weight: normal;
	font-size:0.8em;
	padding: 15px;
	background-color:#f0f0f0;
	border-radius: 10px;
	box-shadow: 8px 5px 5px grey;			
	}

.titre_paragraphe {
	background-color:black;
	padding-left:1%;
	font-size:28px;
	font-weight:bold;	
	color:white;
}

.titre_paragraphe_centre {
	/*font-family:lobster;*/
	font-family:'Varela Round', sans-serif;	
	background-color:black;
	padding:5px;
	font-size:1.2em;
	font-weight:bold;	
	font-style:italic;
	color:white;
	text-align:center;
}


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

#slider { overflow: hidden;

			width:100%;
			height:100%;
			margin-left:0%;}
#slider figure img { width: 20%; float: left;}
#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite; 
}

#contacts{width:100%;
			height:21%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			gap: 15px;
			margin:1%;
	}

footer
{			
	background-color:black;
	color:white;
	font-size:1em;

	text-align:center;
	height:3%;
	width:100%;
	margin:0;
}
footer a
{
	text-decoration:none;
	color:white;

}

footer a:hover
{
	text-decoration:none;
	color:rgb(127,127,127);;
	
}

video {border radius:30px;
box-shadow: 10px 5px 5px grey;
}


#creation
{
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	width:auto;
	height:auto;
	min-height:800px;
	background-color:#white;
	padding:0;
	margin:20px;
}

#creation_lien
{
	width:45%;
	height:400px;
	text-align:center;
	color:black;
	background-color:#555555;
	border-radius:15px;
	margin-left: 10;
	margin-top:10;
	margin-right:15;
	margin-bottom:0;	
	box-shadow: 4px 4px 4px grey;	
	
}

#creation_titre
{
	height:50px;
	text-align:center;
	align-content:center;
	font-weight:bold;
	font-size:24px;
	border-radius:15px 15px 0 0;
	background-color: rgb(0,0,0);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;

}

#creation_description
{
	height:auto;
	text-align:left;
	font-weight:normal;
	border-radius:0 0 15px 15px;
	font-size:14px;
	margin-left: 4;
	margin-top:10;
	margin-right:4;
	margin-bottom:2;
	color:black;

}

#creation_lien:hover
{
	width:45%;
	height:400px;
	text-align:center;
	font-weight:bold;
	color:blue;
	background-color:#eeeeee;
	border-radius:15px;
	margin:10px;
	box-shadow: 4px 4px 4px grey;
	margin-left: 10;
	margin-top:10;
	margin-right:15;
	margin-bottom:0;	
	
}

#creation_lien: img
{
height:99%;
}

#creation_lien:hover img
{
display: none;
	
}

#creation_lien p
{
display: none;
	
}

#creation_lien:hover p
{
display: block;
text-align:justify;
color:black;
	margin-left: 4;
	margin-top:0;
	margin-right:4;
	
}

#creation_lien a
{text-decoration:none;
}

#creation_lien:hover a
{text-decoration:none;
}

.messages{margin:1%;
width:48%}

.messages a {text-decoration:none;
color:black;}

input {	border-radius:5px;
background-color:#C5BA8E;
	font-weight:bold;}

textarea {	border-radius:8px;
background-color:#F3ED86;}





@media (orientation: portrait) {

	

			body{
			margin:0;
			padding:0;

			}

			#main2 {
				
				width:99%;
				height:auto;
				min-height:900px;
				background-color:#B0D4D4;
				padding:0;
				margin:1%;
				text-align:justify;
				word-wrap : break-word;
				font-family:'Roboto', sans-serif;
				font-size: 1.2rem;
				color:black;
				
			}
			#main {
				
				width:99%;
				height:auto;
				min-height:900px;
				background-image: url(images/background.png);
				padding:0;
				margin:1%;
				text-align:justify;
				word-wrap : break-word;
				font-family:"Poppins", Sans-serif;
				letter-spacing:-0.2px;
				font-size: 1.2rem;
				color:black;
				
				
			}


			#header
			{	margin:0;
				padding:0;
				position:sticky;
				top:0px;
				box-shadow: 0px 4px 4px grey;
			}



			#grandtitre
			{

				text-align:center;
				width:100%;
				height:auto;
				font-family:'lobster';
				font-size:4em;
				font-weight:bold;
				color:white;
				background-image: url(images/bandeau.jpg);	
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: center top;
				margin:0;
				border:0;
				

			}

			#menu 
			{
				width:100%;
				height:5%;
			}


			#menu ul
			{	visibility:collapse;
				list-style-type:none;
				margin:0;
				padding:0;
			}
			#menu ul li
			{
					display:block;
					float:left;
					color:white;
					width:20%;
					font-family: Courier New;
					font-size:28px;
					font-weight:bold;	
					text-align:center;
					vertical-align:center;
					background-color:black;	
			}

			#menu ul li a
			{
				text-decoration:none;
				color:white;

			}

			#menu ul li a:hover
			{
				text-decoration:none;
				color:rgb(127,127,127);
				
			}


			#contenu
			{
				width:auto;
				margin-left: 5%;
				margin-right:5%;
				text-align:left;
				display: flex;
				flex-direction: column;	
				word-wrap : break-word;
				font-family:'lobster';
				font-family:'Varela Round', sans-serif;
				font-size: 1.2em;
				color:black;
				padding:1%;
				font-weight: normal;
				font-size:1.2em;
				background-color:rgb(240,240,240);
				border-radius: 10px;
				box-shadow: 8px 5px 5px grey;
				

			}
			
			.baretitre {inherit; width:60%;margin-left:20%;}

			.texteintro{
				width:auto;margin-left:5%;margin-right:5%;text-align:left;font-family:'Varela Round', sans-serif;
				text-align:left;
				}
				
			.texteintro2{width:auto;margin-left:5%;margin-right:5%;text-align:left;
			color:black;
				font-weight: normal;
				font-size:1.2em;
				padding: 15px;
				background-color:#f0f0f0;
				border-radius: 10px;
				box-shadow: 8px 5px 5px grey;
				}

			#photoid{	width:99%;
						margin: 0;}

			#photoid img {width:99%;
							box-shadow: 10px 5px 5px grey;
							border-radius: 30px;				
							margin:0; }
						


			#logiciels{	width:100%;
						height:15%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						gap: 15px;
						text-align:justify;
						word-wrap : break-word;
						font-family:'Roboto', sans-serif;
						font-size: 1.2rem;
						color:black;
						padding:0;}
						
			#logiciels figure {

						justify-content: center;
						align-items: center;
						}
						

			#competences{width:100%;
						height:auto;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						gap: 15px;
				}
				
			#target_competences:target {
				padding-top: 7em; 
				margin-top: -7em; 
			}
						
			.comp {
						width:90%;
						height:99%;
						justify-content: justify;
						color:black;
						align-items: center;
						border-radius: 30px;			
						box-shadow: 5px 5px 5px grey;	
						background-color:rgb(240,240,240);
						padding:1%;	
						font-size:3em;
						}			

			#target_creations:target {
				padding-top: 7em; 
				margin-top: -7em; 
			}
				

			#creations{	width:100%;
						height:auto;
						display: flex;
						flex-wrap: wrap;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align:center;			
						gap: 15px;}
						
			.crea {
						font-weight: 900;
						justify-content: center;
						width:99%;
						margin:0;
						align-items: center;
						text-align:center;
						margin:0; }

			.crea p{ 
				opacity: 1;
				margin-left:5%;
				width:100%;
				display:block;
				text-align:left;
				color:black;
				font-family:'Varela Round', sans-serif;
				font-weight: normal;
				font-size:0.8em;
				padding: 15px;
				background-color:white;
				border-radius: 10px;
				box-shadow: 8px 5px 5px grey;
				}
			.crea:hover p{ 
				opacity: 1;
				margin-left:5%;
				width:100%;
				display:block;
				font-family:'Varela Round', sans-serif;
				text-align:left;
				color:black;
				font-weight: normal;
				font-size:0.8em;
				padding: 15px;
				background-color:#f0f0f0;
				border-radius: 10px;
				box-shadow: 8px 5px 5px grey;
				}	

			.crea img {
						box-shadow: 10px 5px 5px grey;
						width:90%;
						align-items: center;
						border-radius: 30px;				
						margin:auto; }			


			.crea img:hover {
						box-shadow: 10px 5px 5px grey;
						width:100%;
						align-items: center;
						margin:auto; }


			#target_passions:target {
				padding-top: 7em; 
				margin-top: -7em; 
			}
							
			#passions{	width:100%;
						height:auto;
						display: flex;
						flex-wrap: wrap;
						flex-direction: column;
						margin:auto;
						
						}
						
			.passions_bloc {padding:0;
							text-align:justify;			
							width:97%;
							margin:1%;
							align-items: center;
						}

			.passions_bloc img {
						box-shadow: 10px 5px 5px grey;
						width:80%;
						border-radius: 30px;				
						margin:auto; }				


			.titre_paragraphe {
				font-size:28px;
				font-weight:bold;	
				color:white;
			}

			.titre_paragraphe_centre {
				font-family:lobster;
				font-size:28px;
				font-weight:bold;	
				color:white;
				text-align:center;
			}

			#contacts{width:100%;
						height:auto;
						display: flex;
						flex-direction: column;

						text-align:center;
						align-items: center;
						gap: 15px;
						margin:1%;
				}
				
			.messages{margin:1%;
			width:95%}

			.messages a {text-decoration:none;
			color:black;}	

			footer
			{			
				background-color:black;
				color:white;
				font-size:3em;

				text-align:center;
				height:3%;
				width:100%;
				margin:0;
			}
			footer a
			{
				text-decoration:none;
				color:white;

			}

			footer a:hover
			{
				text-decoration:none;
				color:rgb(127,127,127);;
				
			}


}