*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:#FFF;
    font-family: 'Mali',  Arial, Helvetica, sans-serif;

}
address
{
  font-style: normal;
}

html
{
    background-color:rgb(34, 34, 34) ;
}

a
{
    text-decoration: none;
}

strong
{
    font-weight: initial;
}

h3
{
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h4
{
    font-size: 2em;
    width: fit-content;
    margin: 1em auto;
}

h5
{
  margin: 1em 0
}

h6,
h5 {
  font-size: 1.5em;
}

h6 {
  background-color: rgb(26, 89, 156);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  width: 100%;
  /* position: relative;
  bottom: 0.7em; */
}

h1
{
    border-bottom: 0.2em solid rgb(33, 60, 95);
}

span,
em
{
    display: block;
}

li
{
    list-style: none;
}

.dev
{
    font-style: italic;
    font-size: 1em;
}

.ham
{
    display: none;
}
#about-me
{
    margin-bottom: 1em;
}

#experience,
#project,
#competence
{
    position: relative;
    bottom:2em;
    width: fit-content;
    margin:0 auto;
    padding:0.5em;
    border:1px outset rgb(33, 60, 95);
    border-radius: 0.5em;
}
#experience,
#project
{
    background-color: #282c34;
}
#competence
{
    background-color: rgb(34, 34, 34);

}

/* ======================================== assemble code which are from different parts ================================= */
h6,
h4,
#experience,
#project,
#competence,
.container--left-nav-img,
.container--left-nav-list > a,
.container--left-footer,
.competence_icon,
.enDev
{
    text-align:center;
}

.container--left,
.container--left-footer-reseau > div,
.container--rigth-main_presentation,
.main_competence,
.container--rigth-main_experience_flex_active
{
    display: flex;
}

.main_experience_div
{
    width: 20em;
    height: 15em;
    margin: 0 auto;
    border-radius: 1em;
    background-size:cover;
    background-position: center;
}

.container--rigth-main_experience,
.container--rigth-main_project
{
    background-color: #282c34;
    border:0.1em solid rgb(33, 60, 95);
}

.hidden
{
    display: none;
}


/* ===========================left part of the screen================================ */
.container--left
{
    z-index: 1;
    position: fixed;
    flex-direction: column;
    justify-content: space-evenly;
    width: 15vw;
    height: 100vh;
    box-shadow:11px 0px 13px 0px rgb(33, 60, 95) ;
}

.container--left-nav-img
{
    width: 60%;
    margin: 2em auto;
}

.container--left-nav-img-profil
{
    width: 100%;
    clip-path:ellipse(45% 45%);
}

.container--left-nav-list
{
    display : flex;
    flex-direction: column;
}
.container--left-nav-list > a
{
    text-decoration: none;
    margin-top: 0.5em;
    padding: 0.5em;
    transition:0.6s;

}
.container--left-nav-list > a:hover
{
    transition: background-color 0.6s linear;
    background-color:rgb(33, 60, 95);
}
.container--left-footer
{
    margin-bottom: 1em;
}
.container--left-footer-reseau > div
{
    flex-direction: row;
    justify-content: space-evenly;
}


/* ===========================Rigth part of the screen================================ */

.container--rigth
{
    margin-left: 15vw;
}

.container--rigth-main
{
    width: 100%;
}


.container--rigth-main > div
{
    max-height: fit-content;
    min-height: 80vh;
    width: 100%;
    padding:0 1em;
}

.container--rigth-main_presentation
{
    flex-direction: column;
    justify-content: center;
    font-size: 1.6em;
}

.cv-div
{
    display: flex;
    justify-content: space-evenly;
    margin-top: 3em;
}

.cv{
    background-color:#282c34;
    border: 2px outset rgb(33, 60, 95);
    border-radius: 0.5em;
    color:rgb(32, 104, 197);
    padding: 0.5em;
    transition:1s;
}
.cv:hover
{
    background-color: rgb(33, 60, 95);
    border:2px solid rgb(32, 104, 197) ;
    color:rgb(233, 233, 233);
    transition: 1s  ;
}


/*=========================================== EXPERIENCE =====================================*/

.container--rigth-main_experience_flex  {
  width: 100%;
display:flex;
flex-flow: row nowrap;
margin-top: calc(40vh - 224px);
justify-content: space-between;
}

.container--rigth-main_experience_flex  > li 
{
    width: 20em;
    height: 15em;
    margin:0 auto;
    border-radius: 1em;
   background-color: #fff;
   background-position: center;
   -webkit-perspective: 360px;
           perspective: 360px;
 }

.main_experience_div
{
    font-family: 'Press Start 2P';
    text-align: center;
    padding-top: calc(40% - 1em);
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
    transform: rotate3d(1, 0, 0, 90deg);
    /* position: absolute; */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0.9em;
    pointer-events: none;
    background-color: rgba(26, 88, 156, 0.9);
}

.container--rigth-main_experience_flex_active
{
    transition: 1s linear;
    width: fit-content;
    margin: auto;
    border-bottom: 1em solid rgb(33, 60, 95);
}
.container--rigth-main_experience_flex_active > li
{
    width: 12em;
    height: 11em;
    margin: 1em 0.5em;
    border-radius: 1em;
    background-position: center;
    

}

.container--rigth-main_experience_flex_active >li > .main_experience_div
{
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
}


#pompier,
#mcdo
{
   background-size:cover;
}
#marine,
#indigo
{
   background-color: #FFF;
   background-size: contain;
   background-repeat: no-repeat;
}
#pompier 
{
    background-image: url(/../images/pompier.jpg);

}
#mcdo 
{
   background-image: url(/../images/mcdo.jpg);

}
#indigo 
{
   background-image: url(/../images/indigo.png);
}
#marine 
{
   background-image: url(/../images/Marine_Nationale.svg.png);
}

.display_experience
{
    margin: auto;
    width: 70vw;
}

.display_experience_ul > li
{
    margin: 0.4em 0;
}



 /* ============================COMPETENCE============================ */

 .main_competence
{
    justify-content: flex-start;
}
.main_competence > div
{
    margin: 2em 1em;
}
.competence_icon
{
    width: 4.5em;
    align-self: center;
}
.competence_list
{
    padding-left: 1em;
    border-left: 1px solid #FFF;
    align-self: center;
}

/* ===================================Project================================= */

.main_project_card {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
}

.card_flip {
  margin-top: 1em;
  position: relative;
  width: 20em;
  height: 25em;
  
}
.front,
.back {
    display: block;
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
    transition-duration: .5s;
    transition-property: transform, opacity;
    display: block;
    color: white;
    width: inherit;
    background-size: cover!important;
    background-position: center!important;
    height: 100%;
    background-color:rgb(34, 34, 34) ;
    border: 3px solid rgba(26, 88, 156, 0.9);
    border-radius: 1em;
  }

  .front {
    transform: rotateY(0deg)
  }
  .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
  }
  .back > p{
    margin:1em 2em;
  }
  .back > ul{
    text-align: center;
    margin-top:0.5em;
  }

  .technoTitle {
    margin-top:1.5em;
    margin-left: 2em;
  }

  .card_flip:hover .front{
    transform: rotateY(180deg);
  }
  .card_flip:hover .back{
    opacity: 1;
    transform: rotateY(0deg);
  }

  .escapeoroom
{
    background-image: url(/../images/Escape.gif);
}
.portfolio
{
    background-image: url(/../images/monportfolio.PNG);
    background-position: left!important;
}

.enDev{
  width: 100%;
  text-align: center;
  font-size: 2em;
  color:rgb(180, 1, 1);
  position: absolute;
  bottom:1.2em;
}
.card-flip-button {
  padding-top: 0.2em;
  text-align: center;
  font-weight: bold;
  color: rgb(26, 89, 156);
  font-size: 1.2em;
  background-color: #282c34;
  border-bottom-left-radius: 0.8em;
  border-bottom-right-radius: 0.8em;
  position: absolute;
  bottom:0em;
  height: 2em;
  width: 100%;
  transition: 1s;
}

.card-flip-button:hover {
  transition: 1s;
  color:#fff;
  box-shadow: inset 0px 0px 10px 8px #282c34;
  background-color: rgb(26, 89, 156);
}
  
/* ================================modif scrollbar=========================== */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: rgb(33, 60, 95);
    border: 31px none rgb(33, 60, 95);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(13, 50, 99);
}
::-webkit-scrollbar-thumb:active {
    background: rgb(13, 50, 99);
}
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border: 1px solid #ffffff;
    border-radius: 5px;
}
::-webkit-scrollbar-track:hover {
    background: #f2f2f2;
}
::-webkit-scrollbar-track:active {
    background: #f5f5f5;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ================================animation div experience=========================== */

@media (min-width: 751px)
{
.in-top .main_experience_div {
    -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-animation: in-top 300ms ease 0ms 1 forwards;
            animation: in-top 300ms ease 0ms 1 forwards;
  }
  
  .in-right .main_experience_div {
    -webkit-transform-origin: 100% 0%;
        -ms-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-animation: in-right 300ms ease 0ms 1 forwards;
            animation: in-right 300ms ease 0ms 1 forwards;
  }
  
  .in-bottom .main_experience_div {
    -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
            animation: in-bottom 300ms ease 0ms 1 forwards;
  }
  
  .in-left .main_experience_div {
    -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-animation: in-left 300ms ease 0ms 1 forwards;
            animation: in-left 300ms ease 0ms 1 forwards;
  }
  
  .out-top .main_experience_div {
    -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-animation: out-top 300ms ease 0ms 1 forwards;
            animation: out-top 300ms ease 0ms 1 forwards;
  }
  
  .out-right .main_experience_div {
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-animation: out-right 300ms ease 0ms 1 forwards;
            animation: out-right 300ms ease 0ms 1 forwards;
  }
  
  .out-bottom .main_experience_div {
    -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
            animation: out-bottom 300ms ease 0ms 1 forwards;
  }
  
  .out-left .main_experience_div {
    -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-animation: out-left 300ms ease 0ms 1 forwards;
            animation: out-left 300ms ease 0ms 1 forwards;
  }
  
  @-webkit-keyframes in-top {
    from {
      -webkit-transform: rotate3d(-1, 0, 0, 90deg);
              transform: rotate3d(-1, 0, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  
  @keyframes in-top {
    from {
      -webkit-transform: rotate3d(-1, 0, 0, 90deg);
              transform: rotate3d(-1, 0, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @-webkit-keyframes in-right {
    from {
      -webkit-transform: rotate3d(0, -1, 0, 90deg);
              transform: rotate3d(0, -1, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-right {
    from {
      -webkit-transform: rotate3d(0, -1, 0, 90deg);
              transform: rotate3d(0, -1, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @-webkit-keyframes in-bottom {
    from {
      -webkit-transform: rotate3d(1, 0, 0, 90deg);
              transform: rotate3d(1, 0, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-bottom {
    from {
      -webkit-transform: rotate3d(1, 0, 0, 90deg);
              transform: rotate3d(1, 0, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @-webkit-keyframes in-left {
    from {
      -webkit-transform: rotate3d(0, 1, 0, 90deg);
              transform: rotate3d(0, 1, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-left {
    from {
      -webkit-transform: rotate3d(0, 1, 0, 90deg);
              transform: rotate3d(0, 1, 0, 90deg);
    }
    to {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @-webkit-keyframes out-top {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(-1, 0, 0, 108.5deg);
              transform: rotate3d(-1, 0, 0, 108.5deg);
    }
  }
  @keyframes out-top {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(-1, 0, 0, 108.5deg);
              transform: rotate3d(-1, 0, 0, 108.5deg);
    }
  }
  @-webkit-keyframes out-right {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(0, -1, 0, 114deg);
              transform: rotate3d(0, -1, 0, 114deg);
    }
  }
  @keyframes out-right {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(0, -1, 0, 114deg);
              transform: rotate3d(0, -1, 0, 114deg);
    }
  }
  @-webkit-keyframes out-bottom {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(1, 0, 0, 108.5deg);
              transform: rotate3d(1, 0, 0, 108.5deg);
    }
  }
  @keyframes out-bottom {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(1, 0, 0, 108.5deg);
              transform: rotate3d(1, 0, 0, 108.5deg);
    }
  }
  @-webkit-keyframes out-left {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(0, 1, 0, 114deg);
              transform: rotate3d(0, 1, 0, 114deg);
    }
  }
  @keyframes out-left {
    from {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
              transform: rotate3d(0, 0, 0, 0deg);
    }
    to {
      -webkit-transform: rotate3d(0, 1, 0, 114deg);
              transform: rotate3d(0, 1, 0, 114deg);
    }
  }
}