@font-face {
    font-family: "Caviar Dreams";
    src: url("/font/CaviarDreams.ttf") format("truetype");
}

@font-face {
    font-family: "Caviar Dreams bold";
    src: url("/font/CaviarDreams_Bold.ttf") format("truetype");
}

*{
    margin:0;
    padding:0;
    z-index:2;
}

body {
    background-color: #ffedc6;  
}
#Logo img{
  
    height: 100px;
    margin: 30px; 
    left : 0px;
    top:0px;     
    z-index:2;
}

nav ul {
    list-style-type: none;
    margin : 0;
    padding: 15px;
    height: 35px;
    position:fixed;
    left: 1100px ;
    top:0px;
    width: auto;
    overflow: hidden;
    text-decoration: none;
    z-index:2;
}

nav li {
    float : left;  
    text-decoration: none;
    z-index:2;
    
}

nav li a {
    display : block;
    color : rgb(14, 10, 10);
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    font-family:Caviar Dreams;
    

  
    
}
li a:hover {
    background-color: #7d58b8;
    color: white;
    transition-duration: 0.5s;

    z-index:2;
  }



/* cette partie est la partie sur le footer et ces diférentes listes qui ont chacunes été placé a un endroit différent */
#footer {
    border-radius : 5px;
    font-family: Caviar Dreams;
    position:relative;
    top :0px;
    left:0%;
    background:rgba(196, 140, 140, 0.6);
    width:100%;
    margin-left:0;
    height:150px;
    display:inline-block;

}
#footer #site ul {
    position:relative;
    list-style-type: none;
    text-align: left;
    left: 120px;
}

#footer #site ul p {
    top: 15px;
    font-size:30px;
    position: relative;
    left: 7px;
}
footer a {
    text-decoration : none;
    color: black;
}
#footer #site ul li {
    position: relative;
    bottom : -15px;
    left: 3px;
}

#footer #gp ul {
    position:absolute;
    list-style-type: none;
    text-align: left;
    left: 600px;
    bottom: 60px;
}

#footer #gp ul p {
    top: -15px;
    font-size:30px;
    position: relative;
    
}

#footer #gp ul li {
    position: relative;
    bottom : 10px;
    left: 75px;
}

#footer #autre ul {
    position:absolute;
    list-style-type: none;
    text-align: left;
    left: 1200px;
    bottom: 60px;
}

#footer #autre ul p {
    top: -15px;
    font-size:30px;
    position: relative;
    left: 35px;
}

#footer #autre ul li {
    position: relative;
    bottom : 10px;
    left: 7px;
}

#black {
    z-index:2;
    position: relative;
    width: 100%;
    height: 75%;
    top:0;
    margin:0;
    color : #000000;
    
}

#black img {
    position: absolute;
    width:50px;
    left:47%;
    bottom : 0;
}


#black h1,h2,p{
    position: absolute;
}

#black h1 {
    left:30%;
    top:20%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size : 70px;
}

#black h2 {
    left: 30.2%;
    font-size : 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    top: 34%;   
}

#black p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    left:41%;
    bottom:12%;
    font-size:15px;

}

#degrade {
    position:relative;
    width:100%;
    height:1320;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   
    transition: all 0.5s;
}


#degrade:hover {
    color : #ffffff;
    box-shadow: 20px 50px 200px rgba(0, 0, 0, .5);
}

.background {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index:1;
    opacity: 0;
    transition: all 0.5s;
}

#degrade:hover, #degrade:hover ~ .background {
    opacity: 1;
    background: #e2a9e5;
    background : linear-gradient(45deg, #e2a9e5 15%, #2b94e5 100%);

}


#pres h1 {
    position: relative;
    top:70px;
    left:5%;
}

#pres p {
    position: relative;
    top:200px;
    left:8%;
    width:500px;
}

#pres img {
    position: absolute;
    top:190px;
    width: 350px;
    left:60%
}

#decor img {
    transform : rotate(-10deg);
    position: absolute;
    left: 5%;
    top:42%;
    width: 200px;
}


#Role img {
    position: absolute;
    top: 612px;
    width: 500px;
    left: 600px;

}

#un {
    position : absolute;
    top: 615px;
    left: 600px;
}

#deux {
    position : absolute;
    top: 615px;
    left:900px;
}

#trois {
    position : absolute;
    top: 1000px;
    left:900px;
}

#quatre{
    position : absolute;
    top: 1000px;
    left:600px;
}