@font-face {
  font-family: HostGrotesk;
  src: url(HostGrotesk.ttf);
}


html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color : black;
  background-color: white;
}


img{
  width: 100%;
}

hr, h1, p{
  margin: 0;
}

h1{
  font-family: "HostGrotesk";
  font-size: 1.5vw;
}


header{
  width: 100%;
  padding-top : 1%;
  position: fixed;
  background-color: white;
  z-index: 99;

}

a{
  color: inherit;
  text-decoration: none;
}

.logo{
  float: left;
  width: 4%;
  margin-top : 0.5vh;
  margin-left: 3%;
  margin-right: 3%;
}

.navbar{
  display: flex;
  font-family : HostGrotesk;
}

.trait{
  margin-top: 1%;
  height: 1px;
	border: 0;
	background-color: black;
}

.underline, .fin{
  color : black;
  background-color: inherit;
  text-decoration: none;
  font-size: 15pt;
  //border: solid 1pt;
  //border-radius: 25px;
  padding : 1%;
  margin-right: 2%;
}

.underline:hover{
	opacity : 0.6;
  //color : white;
  //background-color: #527b29;
  text-decoration: none;
}

.fin{
  margin-left: auto;
}
.fin:hover{
	opacity : 0.6;
  //color : white;
  //background-color: #527b29;
  text-decoration: none;
  font-size: 15pt;
  //border: solid 1pt #527b29;
  //border-radius: 25px;
}






.bawflex{
  display: flex;
}

.gauche{
  width: 40%;
  margin-left: auto;
  margin-top: 10vh;
}



.blaze2{
  padding-left: 2%;
  font-size: 2vw;
  margin: 0;
}

.droite{
  margin-top: 17%;
  width: 30%;
  margin-right: auto;
}








.projets{
  background-color: #ebf3ff;
  padding-top : 3%;
}

.titre1{
  font-size: 3vw;
  margin-top: 2%;
  padding: 3%;
}

.description{
  font-size: 1vw;
}

.image1{
  width: 25vw;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}



.bloc{
  mix-blend-mode : luminosity ;
  opacity: 60%;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  border: 1px solid #527b29;
  border-radius: 10px;
  background-color: white;
  width: 25vw;
  height: 25vw;
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
}

.bloc:hover{
  mix-blend-mode: normal;
  opacity: 100%;

    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.lesblocs{
  padding-left: 3%;
  padding-right: 3%;
  margin-top: 2%;
  padding-bottom: 2%;
  display: flex;
  overflow-x: scroll;
}

.texte{
  padding: 2%;
}


.miaou{
	text-align : center;
}

.cvdrive{
  display: block;
  border: none;
  text-align: center;
  padding-top: 5%;
  //padding-bottom: 5%;
  margin: 0 auto;
  width: 90vw;

}


.footerflex{
  display: flex;
  padding: 3%;
}

.footerdroite{
  padding-top: 1%;
  margin-left: auto;
  width: 5%;
  display: flex;
}

.logos{
  margin-right: 20%;
}

.mail{
  text-decoration: none;
  color : inherit;
}

.cc{
  text-align: center;

  margin-top: 1%;
  margin-bottom: 1%;
}






@media only screen and (max-width: 700px) {
  .chargementimage{
    width:70%;
  }
  .logo{
	margin-top : 1%;
    width: 4vh;
  }
  .cc{
    font-size: 10pt;
  }
  .footerdroite{
    width: 15%;
  }
  .underline, .fin{
    font-size: 2vh;
    padding: 2%;
  }
  .cvdrive{
    padding-top: 40%;
    padding-bottom: 15%;
    width: 100vw;
    //height: 70vw;
  }
   h1{
	   font-size: 2vh;
    }
    .miaou{
	    margin-bottom : 30%;
    }
}