@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&family=Oswald:wght@300&display=swap');
body {
    padding: 0 2%;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;   
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    position: sticky;
    top: 0%;
}

nav .profil {
    display: flex;
    align-items: center;
}

nav .profil img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: 0.8s ease-in-out;
}

nav .profil img:hover {
    width: 40px;
    height:40px;
    opacity: -1;
    cursor: pointer;
}

nav .profil h1 {
    font-size: 17px;
    margin-left: 10px;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav ul li {
    margin-left: 20px;
    cursor: pointer;
    border-bottom: 1px solid white;
}

nav ul li:hover {
    border-bottom-color: #000;
}


nav ul li a {
    text-decoration: none;
    color: #000;
}

.contenu {
    margin: 4%;
}

.contenu header {
    margin-top: 5%;
    max-width: 80%;  
}

.contenu header h1 {
    margin: 0;
    text-transform: uppercase;
    font-family: 'Oswald'; sans-serif;
    font-size: 4vw;
}

.contenu header p {
    line-height: 30px;
    color: #474343;
}

.contenu header button {
    background-color: inherit;
    border: none;
    outline: none;
    padding-left: 0;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 1px solid #6b6969;
    cursor: pointer;
}

.contenu header button:hover {
    color: #6b6969;
    border-bottom-color: #000 ;
}
.code {
    width: 100%;
    height: auto;
    margin: auto;
    margin-top: 70px;
    text-align: center;
}
.code img {
    margin-top: 10%;
    max-width: 40%;
    height: auto;
    cursor: pointer;
    transition: .8s ease-in;
}

.code img:hover {
    max-width: 30%;
    opacity: 0.3;
}

.contenu .projets-section {
   margin-top: 6%;
}

.contenu .projets-section h1 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 4vw;
}

.contenu .projets-section .projets{
    display: flex;
    flex-wrap: wrap;
   c cursor: pointer;
    
}

.contenu .projets-section .projets .projet {
    margin-right: 20px;
    max-width: 195px;
}

.contenu .projets-section .projets .projet h4 {
    margin: 0;
    cursor: pointer;
}

.projet #lien{
    font-weight: bold;   
}

.projet #lien:hover {
    color: #000;
    font-size: 12px;
}

.contenu .projets-section .projets .projet a{
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.contenu .projets-section .projets .projet a:hover{
    text-decoration: none;
    color: rgb(54, 52, 199);
    font-size: 18px;
}



.contenu .projets-section .projets .projet .description {
    font-size: 12px;
} 



.contenu .projets-section .projets .projet .date {
    font-size: 11px;
    color: rgb(54, 52, 199);
}

footer {
    margin-top: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #000;
    color: #fff;
    padding: 10px;   
}

footer .colonne a {
   text-decoration: none;

}

footer .colonne p {
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
}

footer .colonne p:hover {
    color: #fff;

}



@media screen and (max-width: 700px) {
    nav {
        justify-content: center;
    }
    nav ul {
        display: none;
    }

    .contenu header {
        margin-top: 10%;
        max-width: 100%;
    }
    
    .contenu .projets-section {
        margin-top: 15%;
    }

    .contenu .projets-section h1 {
        font-size: 1.5em;
    }

    .contenu .projets-section .projets .projet {
        margin-right: 0%;
        margin-bottom: 20px;
        max-width: 100%;
    }

    footer {
        justify-content: flex-start;
    }
    
    footer .colonne{
        width: 80%;
    }

}