html {
	scroll-behavior: smooth;
}


body{
background-image:url('background.jpg');
background-size: 103% ;
background-attachment: fixed;
border:2rem solid;
max-width: 90%;
margin:auto;
}
#zindex{

width: 40%;
position: scroll;
margin-top: 7%;
margin-left: -8%;
margin-top:-10%;
opacity: 0;
transition-property: opacity;
transition-duration: 0.7s;
}

#folio{
width: 40%;
padding-bottom: 20px;
position: scroll;
margin-top: -19%;
margin-left: 65.5%;
margin-top:-19%;
opacity: 0;
transition-property: opacity;
transition-duration: 0.7s;
}

#folio:hover{
opacity:1;
}

#pres{
width: 40%;
z-index: 100;
position: scroll;
margin-top: -15%;
margin-left: -5%;
margin-top:-10%;
opacity: 0;
transition-property: opacity;
color:transparent;
transition-duration: 0.7s;
border-radius: 500px;
}

#pres:hover{
opacity:1;
}

#zindex:hover{
opacity:1;
}

.menu{
position:fixed;
}

#menu1{
margin-top:-2px;
transition-property: margin-top;
transition-duration: 3s;
width: 100%;
position: scroll;
}

#container{
border:0.6rem solid;
color:orange;
height:99%;
margin-top: 19px;
}

#text{
margin-top:10%;
text-align:justify;
margin-left:17%;
margin-right:17%;
font-size:150%;
font-family: Bradley Hand, cursive; 
font-style: bold;
background-image: url('logo.jpg');
border-radius: 20px;
color:orange;
}

#site{
text-align:center;
height: 80%;
margin-top: 10%;
}

#site img{
width: 45%;
border-radius: 30px;
border:0.25rem solid;
border-color: black;
}

#site img:hover{
width: 55%;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
}

#sit{
text-align:center;
margin-top:33px;
}

#sit img{
width: 45%;
background-image:url('mer.gif');
background-size:120%;
border-radius: 20px;
border:0.25rem solid;
border-color: black;
}

#sit img:hover{
width: 55%;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
}

#sito{
text-align:center;
margin-top:33px;
}

#sito img{
width: 45%;
background-image:url('yog.gif');
background-size:100%;
border-radius: 20px;
border:0.25rem solid;
border-color: black;
}

#sito img:hover{
width: 55%;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 17px 14px rgba(0,0,0,0.75);
}

#general{
/*background-image:url('backgroud.jpg');*/
width: 100%;
}

/*longueur back*/
#chou p{
height: 300px;
max-width: 500px;
}

#chouc{
margin-top:22%;
}

#chouc img{
z-index:500;
height: 100%;
transform:rotate(22deg);
background-color: orange;
-webkit-box-shadow: 10px 10px 11px 2px rgba(0,0,0,0.8);
-moz-box-shadow: 10px 10px 11px 2px rgba(0,0,0,0.8);
box-shadow: 10px 10px 11px 2px rgba(0,0,0,0.8);
}

#chouch img{
z-index:500;
width: 65%;
transform:rotate(5deg);
margin-top:15%;
background-color: 
}

#chouch img{
margin-top: -185px;
transition-property: margin-top;
transition-duration: 4s;
width: 60%;
margin-left: 22%;
}

#chouc img{
margin-top: -200px;
/*transition-property: margin-top;
transition-duration: 4s;*/
width: 60%;
z-index: 0;
}

/*#menu{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top:10%;
border-radius: 10px;
width: 100%
}
/*menu general
#menu ul{
position: fixed;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
list-style-type: none;
width:100%;
border-radius: 10px;
height: 100px;
margin-right: -17%;
margin-left: -20%;
padding-left: 20%;
margin-top:-20%;
z-index: 33;
}

#menu ul li.nav-menu{
width: 30%;
text-align: center;
position:relative;
border-radius: 10px;
}

#menu li a{
display:block;
padding: 10px;
}

#menu li a img{
}

#menu ul li.nav-menu a{
color:white;
font-weight: 22px;
font-size: 25px;
}

#menu ul li.nav-menu a:hover{
color:black;
}

#menu ul .submenu{
display:none;
}

#menu ul .nav-menu:hover .submenu{
display:block;
position: absolute;
width:87%;
padding: :10px;
}

#sous li a img{
margin-top: 30%;
margin-left:0%;
width: 150%;
border-radius: 1000px;
}

#sous_2 li a img{/*a droite petit
margin-top: 30%;
margin-left:0%;
width: 150%;
border-radius: 1000px;
}

#sous_1 li a img{     /*a droite petit
margin-top: 30%;
margin-left:-100px;
width:140%;
border-radius: 1000px;
}*/




#pen{
	transform: rotate(33deg);
	margin-top: -10%;
	margin-left:-80px;
	position: scroll;
	
}

#pen img{

	width: 66%;display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

}

#pen img{

  margin-top:150px;
  margin-left:-160px;

  transition-property: all;
transition-duration: 4s;
z-index:1000;

border-radius: 150px;



}

#pen img:hover{
transform: rotate(22deg);
  margin-left:260px;

  }

#bienvenue{
margin-left:17%;
margin-right:17%;
margin-top:8%;
text-align:justify;
font-size:150%;
color: black;
font-family: Bradley Hand, cursive;
font-style: bolder;
font-size: 28px;
}

#flex{
background:linear-gradient(black,#FF6100 );
height:5.2%;
z-index: 3;
border:solid;
border-width: 7px;
border-color: orange;
border-color:black;
border-width: 15px;

}
#chouce{
text-align: center;
margin-top:10%;
}

#chouce img{
margin-top:-20%;	
border-radius: 25px;
width: 40%;
opacity: 1;
z-index: -5;	
}

#chouche{
transform: rotate(-47deg);
margin-top: 30%;
margin-left:20%;
position: scroll;
}

#chouche img{
margin-bottom:-700px;
margin-left:-200px;
width: 10px;
}

#chouc{
position: scroll;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
list-style-type: none;
}

#chouc img{
width: 60%;
margin-left:42.5%;
position: scroll;
border-radius: 99px;
}

#chouce img{
margin-left:190px;
margin-top: 140px;
width: 60%;
margin-left:6%;
}

#ink{
text-align:center;
margin-bottom: 20%;
width: 100%;
}

#ink img{
background-image:url("images/ecriture.gif");
background-size: 110%;
border-radius: 30px;
width: 66%;
border:0.25rem solid;
}

#text2{
margin-top:10%;
text-align:justify;
margin-left:17%;
margin-right:17%;
font-size:150%;
font-family: Bradley Hand, cursive; 
font-style: bold;
border-radius: 20px;
color:orange;
}

#choux img{
margin-top: -250px;
width: 50%;
margin-left:-11%;
}

#scroll_to_top { 
 position: fixed; 
 width: 25px; 
 height: 25px; 
 bottom: 50px; 
 right: 30px;margin-right:45%;
}
#scroll_to_top img { 
  width: 70px; 
  scroll-behavior: smooth;
}