html {
	scroll-behavior: smooth; /*remonte lentement*/
}
body{
background-image:url('background.jpg');
background-size: 103% ;
background-attachment: fixed;
border:2rem solid;
max-width: 90%;
margin:auto;
}

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

#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;
z-index: 33;
}



#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;}

/*#chouc img:hover{
margin-top:100px; */

#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;
}

#chouchou p {

	
/*logo fixe*/
    	/*width: 50%;
    	margin-left:140%;
    	z-index: 3000;
    margin-top:-70%;
    transition-property: margin-top; 
    transition-duration: 8s;
    opacity: 0.7;
    /*background-color: orange;
    position: scroll;
    border-radius: 133px; */
  
 
   
    /*background-color: orange;
    position: scrol{
    l;
    border-radius: 133px; */
}

/*#menu{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top:10%;
border-radius: 10px;
width: 100%}

#menu ul{
/*position: fixed; ... fixed menu
display: flex;
flex-direction: row;
flex-wrap: nowrap;
list-style-type: none;
width:100%;
border-radius: 10px;
/*menu general tomato 
background-color: tomato;
height: 100px;
margin-right: -17%;
margin-left: -20%;
padding-left: 20%;
margin-top:-19%;
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 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%;
	/*background-color: orange;
	
	border-radius: 1000px;
}

#sous_2 li a img{/*a droite petit

	margin-top: 30%;
	margin-left:0%;
	width: 150%;
	/*background-color: orange;
	
	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;
transform: rotate(40deg);
}

#pen img{
margin-top:150px;
margin-left:-160px;
transition-property: margin-left;
transition-duration: 4s;
z-index:1000;
border-radius: 150px

}

#pen img:hover{
margin-left:260px;
}

#souris{
transform: rotate(2deg);
margin-top: -100%;
margin-left:2%;
position: scroll;
width:500px;
position: scroll;
}

#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%;
}

#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;
}