:root{
    --salty-air:#fffbec;
    --dune-shift:#fce2b1;
    --mint-pinch:#abeacb;
    --haleiwa-heat:#32cdc5 ;
}

.header{
    background-color:var(--salty-air)

}
.content .textbox h2 span{
    color:var(--haleiwa-heat);
}
.circle, .circle1{
    background-color:var(--mint-pinch);

}
/*************main*************/
main{
  width:800px;
}
.card-body p{
    font-family: inherit;
    font-style: oblique;
}
.card-body h1{
    letter-spacing: 0.15em;
}
.card-body a{
    text-decoration: none;
    color:black
}
.card{
    background: linear-gradient(86deg, rgb(0 0 0 / 15%) 0%, rgba(255,255,255,0.5438550420168067) 100%);
}
#explication{
    margin-top:15vh;
  }
  #explic img{
  max-width:100%;
  }
  .card-expli{
    display:flex;
    align-items: center;
    margin-bottom:15vh;
    background-color:rgba(221, 221, 221, 0.541);
    border-radius: 2vh;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  .expli{
    padding:2vh;
  }
  .expli h1{
    font-variant-caps: small-caps;
  }
  .expli p{
    width:80%;
    margin:auto
  }
.gauche img{
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%);
  border-top-right-radius: 2vh;
  border-bottom-right-radius:2vh ;
}
.droite img{
  clip-path: polygon(0% 0%, 94% 0, 100% 50%, 96% 100%, 0% 100%);
  border-top-left-radius: 2vh;
  border-bottom-left-radius:2vh;
}

  /***************** bouton ********/
  .bouton{
    margin-top: 6vh;
    margin-left: 2vh;
  }
  .button{
    position: relative;
    background: linear-gradient(86deg, rgba(50,205,197,1) 0%, rgba(171,234,203,1) 100%);
    border-radius: 4em;
    font-size: 16px;
    font-weight: 700;
    color: black;
    padding: 0.8em 1.8em;
    cursor:pointer;
    user-select:none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s; /* Safari */
   
  }
  
  .button:hover {
    transition-duration: 0.1s;
    background-color: #3A3A3A;
  }
  
  .button:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 0 10px 40px white;
  }
  
  .button:active:after {
    box-shadow: 0 0 0 0 white;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top:0;
    opacity: 1;
    transition: 0s;
  }
  
  .button:active {
    top: 1px;
  }
  .expli-img {
   display:flex;
   justify-content: space-around;
   margin-bottom:20vh;
  }
  .expli-images{
    opacity:0.5
  
  }
  .expli-images:hover{
  opacity: 1;
  }
  .expli-img img{
    width:100%;
    max-width: 40vh;
    max-height: 20vh;
  }
    /******************* footer***/
.polygon{
    background-color: var(--salty-air);
}
footer{
    text-align:center;
    background-color:var(--salty-air);
    
}
.moi-footer{
    color:var(--haleiwa-heat)
}