body{
    vertical-align:center;
    padding:0px;
    margin:0px;
    --couleur1: rgb(12, 12, 12);
    --couleur2: rgb(250,250,250);
    --couleur3: rgb(29, 221, 189);
    --couleur4: rgb(224, 200, 67);
    font-family: 'Poppins', sans-serif;
}

#logo{
    width:80px;
    vertical-align:middle;
    aspect-ratio:1;
    display:inline-block;
    border-radius: 100%;
}

a{
    transition: all .2s ease;
    color:inherit;
    text-decoration: none;
}

a:hover{
    color: var(--couleur3);
}

header{
    padding:20px 5%;
    background-color:var(--couleur1);
}

ul{
    width:70%;
    display:inline-block;
    style-type:none;
}

nav{
    display:inline;
    font-size:1.5em;
}

.Button{
    text-decoration:none;
    padding: 5px 10px;
    border:2px var(--couleur3) solid;
    background-color:var(--couleur3);
    color:var(--couleur1);
    font-size:1.5em;
}

.Button:hover{
    
    background-color:transparent;
}

nav li{
    margin-left:15%;
    display:inline-block;
    color:var(--couleur2);
}

.projetsPrincipaux {
  background-color: var(--couleur2);
  display: inline-block;
  width: 23%;
  color: var(--couleur1);
  margin-left: 3%;
  margin-right: 3%;
  height: 180px;
  vertical-align: middle;
  padding: 0px 10px;
}

.couleur3{
    color:var(--couleur3);
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  
  #logo{
      display:none;
  }
  nav{
      font-size:1.2em;
  }
  ul{
      width:100%;
      padding:0px;
  }
  
  header{
      padding:0px;
      text-align:center;
  }
  
  nav li{
      width:20%;
      margin-left:5%;
      margin-right:5%;
  }
  
  #contact{
        display: inline-block;
        margin-bottom: 30px;
        padding: 3px;
        font-size: 1.3em;
        margin-top: 10px;
  }
  
  
}