@import url(../fonts/stylesheet.css);
@import url(normalize.css);
@import url(fontawesome/css/all.min.css);

/*
Off-white #FFFEF4
Dark grey #202123
Depp violet #5823EE
Medium violet #9F9DF0
Light violet #D9D9F6
Bright yellow #FFFF33
Pastel yellow #FFFF99
*/


* {
  box-sizing: border-box;
  font-size: 15px;
}

img{max-width:100%;height:auto}

body {
  font-family: 'subjectivity-regular';
  background-color: #FFFEF4;
  color: #202123;
}
h1{
  display: none;
}
h2{
  font-family: 'subjectivity-super';
  font-size: 2.8em;
  color: #5823EE;
}


        /*Classes*/
/*Classes génériques*/
.bold{
  font-family: 'subjectivity-bold';
}
.super{
  font-family: 'subjectivity-Super';
}
.medium{
  font-family: 'subjectivity-medium'
}
.my-8{
  margin: 5em auto;
}

/*Classes spécifiques*/
.morphing{
  border-radius: 50%;
}

        /*ID*/

  /*Navbar*/
  nav div{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  nav div a img{
    width: 80%;
  }
  nav button{
    padding: 0 !important;
    margin-right: 1.3em;
  }
  i{
    font-size: 2em;
  }
.navbar{
  background-color: #FFFEF4 !important;
}
.nav-link{
  font-family: 'subjectivity-Super';
  color: #FFFEF4;
  font-size: 4.3em;
  text-align: center;
  }
  .nav-link:hover{
    color:#5823EE;
  }

  .navbar-toggler:focus{
    box-shadow: 0 0 0 0;
  }
#navbarNav{
  background-color: #9F9DF0;
}


        /*Animations*/


        /*Media query*/
  /*tablette*/
@media(min-width:768px){
  h2{
    font-size: 5em;
  }
  /*ID*/
#listing-projets img{
  width: 40%;
}
}



/*petit desktop*/
@media(min-width:992px){
  body{
    overflow-x: hidden;
  }
  h2{
    font-size: 3.5em;
  }
            /*Class*/
  .my-8{
    margin-left: 1em;
    margin-right: 1em;
  }
  /*Classes spécifiques*/
  .morphing {
    border-radius: 10px;
    transition: 0.5s;
  }

      /*ID*/
#listing-projets img{
  height: 70%;
  width: auto;
}


      /*Animations*/
.morphing:hover{
  border-radius: 50%;
  transition: 0.5s;
}
  /*Animation slider*/

  .wrapper {
    display: flex;
    flex-direction: row;
    width: 310vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
  }
  .outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  ::-webkit-scrollbar {
    display:none;
  }
}

@media(min-width:1200px){
  .wrapper {
    width: 220vw;
}