:root{
    --mauve-gris:#d1d9e6;
    --mauve-clair:#9da9c1;
    --bleu-mauve:#6f8bca;
    --mauve-prononcer:#6d73b1;
    --mauve-pastel:#b0b2e2;
} 
.header{
    background-color: var(--mauve-gris);
}
.content .textbox h2 span{
    color:var(--mauve-prononcer);
}
.content .textbox h3{
    font-style: oblique;
    color: #333;
  }
.circle, .circle1{
    background-color:var(--mauve-prononcer);
}
footer{
  background-color:var(--mauve-gris)
}
.img-accueile{
    opacity: 1;
}
.polygon{
    background-color: var(--mauve-gris);
}
/***************** formation*/
#formations h1, #Compétence h1, #diplome h1{
    margin:5vh;
    color:var(--mauve-prononcer);
    text-transform: capitalize;
    font-variant-caps: small-caps;
}
.timeline{
    display: flex;
    justify-content: space-between;
    background-color: #b0b2e214;
    margin-bottom: 2vh;
    border-radius: 2vh;
    box-shadow: 10px 5px 5px #b0b2e230;
    align-items: center;

    align-items:center;
}
.timeline h2{
    font-size:1.9em;
    font-family: "menu";
    margin-right: 3vh;
}
 .date{
    background-color:#abeacb;
    padding:4vh;
    font-size:1.2em;
    font-weight: 700;
}

/***************** Compétences**********/
img{
    width:100%;
  }
  .structure img{
    width:40%;
    margin:auto;
  }
  .structures img{
    width:90%;
    margin:auto
  }
  .structur img{
    width:45%
  }
  .structure, .structures, .structur{
    text-align: center;
  }
  .Montage h2, .Web h2, .CMS h2{
    text-align:center;
    margin-bottom:5vh;
    margin-top: 10vh;
    
  }
  .graphisme{
    display: flex;
    justify-content: space-around;
  }

  /***************** Diplome ***********/
.diplome{
  background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 5vh;
margin-bottom:10vh;
}
/************ responsive */
@media only screen and (max-width: 600px){
    .content{
        display:flex;
        flex-wrap:wrap;
    }
}
