* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
@font-face {
  font-family:Milestone ;
  src: url(/font/MilestoneBrush.ttf);
}
@font-face {
  font-family: Cafe;
  src: url(/font/This\ Cafe.ttf);
}
@font-face {
  font-family: Amatic;
  src: url(/font/AmaticSC-Bold.ttf);
}
@font-face {
  font-family: Quatrocento;
  src: url(/font/QuattrocentoSans-Regular.ttf);
}
body {
  background-color: #181822;
  
 
  background-position: center; /* Centre l'image dans la div */
  background-size: contain;
  font-family: Quatrocento;
}


h1 {
  color: orangered;
  text-align: center;
  margin: 5%;
  font-family: Amatic;
  font-size: 3em;
}



.illustration {
  border-radius: 5px;
  display: flex;
  z-index: 10;
  position:fixed;
  left: 0; /* ajustez selon vos besoins */
  top:15vh;
  transform: translateX(-80%);
  width: auto; /* ajustez selon vos besoins */
  height: 75vh; /* ajustez selon vos besoins */

  transition: transform 0.5s ease-in-out; /* Durée et type de transition */
}
.illustration img {
  border-radius: 5px;
  width: auto; /* ajustez selon vos besoins */
  height: 75vh; /* ajustez selon vos besoins */
}
.illustration p{
  text-transform: uppercase;
  border-radius: 5px;
  writing-mode: vertical-rl; /* ou vertical-lr */
  text-orientation: upright;
  font-size: 3em;
  background-color: #F5F5DC;
     text-align: center;   
     color: orangered;  
     font-family: Cafe;
}
.sliderLeft:hover .illustration {
  transform: translateX(0%); /* Déplace l'illustration à sa position visible */
}




.sliderNew {
  width: 75vw;
  margin: 5% auto;
}

.img-div {
  width: 15vw;
  height: 30vh;
  margin: 0 2vw;
  border-radius: 5px;
}
.div1 {
  background: url(portfolio/MockupFanellieD.png) center no-repeat;
  background-size: cover;
}
.div2 {
  background: url(portfolio/MockupDUPON.png) center no-repeat;
  background-size: cover;
}
.div3 {
  background: url(portfolio/AfficheBluema.png) center no-repeat;
  background-size: cover;
}
.div4 {
  background: url(portfolio/calendrierUPDC.png) center no-repeat;
  background-size: cover;
}
.div5 {
  background: url(portfolio/SiteSunny.png) center no-repeat;
  background-size: cover;
} 
.quesaco {
  display:flex;
  align-items: center;
  justify-content: center;
}

.quesaco p {
  font-size: 1.5em;
}

.blablaQuesaco {
 text-align: center;
  color: whitesmoke;
  max-width: 66vw;
  height: auto;
}

.blablaQuesaco p {
  width: 75%;
  padding: 1%;
  margin-left: 15%;
}
/*
.CaseBlabla {
  display: flex;
  color: whitesmoke;
}
.CaseBlabla h2 {
  white-space: nowrap;
}
.Mot {
  border: rgb(26, 177, 223) solid 3px;
  border-radius: 5%;
  margin: 10%;
  padding: 3% 10% 10% 10%;
}

.Offre {
  border: rgb(155, 9, 192) solid 3px;
  border-radius: 5%;
  padding: 3% 10% 10% 10%;
}*/
.lienPortfolio {
  display: flex; 
  justify-content: center;
  margin-top: 3%;
}
.lienPortfolio a {
  position: absolute; /* Pour positionner l'élément par rapport au body */
      display: inline-block; /* Permet d'ajouter du padding */
    background-color: orangered; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 0.5em 1em; /* Espacement interne en em pour plus de flexibilité */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; /* Pas de soulignement */
    font-size: 1rem; /* Taille de police flexible */
}

.lienPortfolio a:hover {
  background-color: orange;
}