*{
    font-family:sans-serif;
}

body{
    display: flex;
    align-items: flex-start;
}

#sidebar{
    width:20vw;
    max-width: 200px;
    margin-top: 70px;
    position: fixed;
    background-color: white;
}

#logo{
 width:50px;
 height:50px;
 line-height: 50px;
 text-align: center;
 font-size: 40px;
 border:2px solid #000;
 border-radius: 50px;
 position: fixed;
 top:10px;
 left:10px;
}

main{
    margin-left: 20vw;
    width: 80vw;
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
}

main article img{
    width:100%;
}

nav ul{
    padding: 0;
    margin: 0;
}

nav ul li{
    list-style-type: none;
    line-height: 30px;
    border-bottom: 1px solid #F00;
}

#projet{
    width: 80vw;
    position: fixed;
    right: -80vw;
    top: 0;
    height: 100vh;
    background-color: white;
    transition: all .5s;
    overflow-y:scroll;
}

#projet img{
    width: 100%;
}

.projet-open{
    right:0vw !important;
}

#projet button{
    position: absolute;
    top:20px;
    right:20px;
}