* {
  margin: 0;
  padding: 0;
  position: relative;
}


body {
   background-color: black;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    color: white;
    margin:0;
    padding:0;
    box-sizing: border-box;


}


p {
    text-transform: none;
}

p a{

  text-decoration:underline;

}
header {
  display: flex;
  justify-content: space-between;

}


nav {
    display: block;
    position: fixed;
    margin-top: 0.4em;
    margin-left: 0;
    width: 100%;
    height: auto;
    z-index:2;
    margin-bottom: 5em;

    }

    .contact{
list-style: none;
white-space: nowrap;
font-size: 14px;
position: fixed;
width: 100vh;
bottom:-3%;
right: 2.3%;
transform: rotate(90deg);
transform-origin: 100% 100%;
    z-index:3;
}

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

  a:hover {
      text-decoration:none;
    }


h1 {
text-transform: none;
font-size: 16px;
}




main{

  margin:auto;
}

.menu{
  display: inline-block;

}

.menu a {
  margin-left: 1.0rem;
}


.projets{
 padding-top: 3%;
 margin-left: 0.8% ;
  margin-right: 7%;
  margin-bottom: 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  grid-gap: 0.5rem;


}
.dessin{
 padding-top: 6%;
 margin-left: 0.8% ;
  margin-right: 7%;
  margin-bottom: 5%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  grid-gap: 0.5rem;


}
.dessin img{
  width: 100%;
  height: auto;



}

.projets img{
  width: 100%;
  height: auto;


}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.img2 img{

  opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  width: 100%;
}

.img2:hover img{
opacity: .8;
  width: 100%;
 }


.description{
  text-decoration: none;
  margin-top: 3em;
  font-size: 13px;
    width: 25%;
margin-right: 6%;
    float: right;


}


.suivant{
  float: right;
  font-weight: bold;
    font-size: 12px;
}

.suivant a:hover{
  float: right;
  font-weight: bold;
    font-size: 105%;
}

.gallery {
  list-style: none;
  width: 100%;
  height: 100%;
}


.liste{
  padding-top: 3em;
  width: 100%;
  height: 100%;
}



@media screen and (max-width: 800px) {

  .projets  {
     padding-top: 8%;
    grid-template-columns: repeat(2, 1fr);}

    .contact{
    right: 4%;
    bottom:-6%;}

}


@media screen and (max-width: 600px) {
  nav { width: 80%;
      height: auto;
    line-height: 1.4; }

  .projets{
    padding-top: 10%;
    grid-template-columns: repeat(1, 1fr);}


.description{
text-decoration: none;
margin-top: 5em;
margin-bottom: 0.2em;
font-size: 15px;
width: 80%;
margin-left: 2em;
float:none;}


.contact{
right: 5%;}
}



@media screen and (max-width: 440px) {

  .projets{

    grid-template-columns: repeat(1, 1fr);}
}