@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Libre+Baskerville&display=swap');

body
{
font-family: 'Courier Prime', sans-serif;
padding: 0;
margin: 0;
}

ul
{
margin: 0;
padding: 0;
}

li
{
list-style-type: none;
}

h2
{
text-transform: uppercase;
text-align: center;
padding-top: 30px;
font-size: 40px;
text-decoration: underline;
}

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

nav
{
background-color: #FFFAE1;
position: fixed;
width: 100%;
opacity: 0.9;
}

header li
{
float: right;
font-size: 20px;
}

header li a 
{
text-decoration: none;
display: block;
text-align: center;
padding: 18px 16px;

}

#logo
{
font-family: 'Libre Baskerville', sans-serif;
font-weight: bold;
float: left;
}

#ImageFond
{
padding-top: 60px;
background: url(image/fond.jpg) no-repeat fixed 50% 50%;
background-size: cover;
height: 900px;
} 

h1
{
font-family: 'Libre Baskerville', sans-serif;
text-align: center;
color: black;
font-size: 60px;
margin-top: 40px;
}

#Trait1
{
height: 3px;
width: 25%;
margin: 0px auto;
background-color: black;
}

h3
{
text-align: center;
color: black;
font-size: 50px;
}

#Presentation
{
background-color: #FFFAE1;
padding: 10px 0px 100px 0px;

}

#Introduction
{
padding: 0px 20%;
text-align: center;
}

#Proposition
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 10%;
}

.ImageProposition h4
{
font-family:'libre Basskerville' sans-serif;
text-align: center;
font-size: 30px;
margin: 15px;
font-weight: 300;
}

.ImageProposition img
{
border-radius: 10px;
box-shadow: inset -1px 3px 8px 5px #1F87FF, 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0,0,0,0);
}

.ImageProposition img:hover
{
opacity: 0.5;
transform: scale(1.08);
transition: 0.6s;
}

#Autrejeux
{
height: 1400px;
}
#AutreJeux h2
{
padding-top: 60px;
}

#Jeux1
{
background: url(image/dofusretro.jpg) no-repeat;
}

#Jeux1 p 
{
transform: translateX(90%);
}

#Jeux2
{
background: url(image/wakfu.jpg) no-repeat;
}

#Jeux2 p 
{
transform: translateX(210%);
}

#Jeux3
{
background:url(image/waven.jpg) no-repeat;
}

#Jeux3 p
{
transform: translateX(80%);
}

#AutreJeux ul
{
background-color: white;
display: flex;
justify-content: space-around;
padding: 40px 0 100px 0;
}


#AutreJeux li
{
height: 195px;
width: 264px;
max-width: 550px;
float: left;
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}

#AutreJeux p
{
height: 50px;
width: 200px;
background-color: #FFFAE1;
float: right;
font-size: 1.5em;
text-align: center;
padding-top: 15px;
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
}

#AutreJeux #Jeux2
{
float: right;
}

#Jeux2 p
{
float: left;
margin-left: -180px;
}

#Histoire
{
background-color: #FFFAE1;
text-align: center;
border: 1px solid #FFFAE1;
padding: 50px 0px 60px 0px;
}

#Histoire h2
{
text-align: center;
}