body, * {
    padding: 0%;
    margin: 0%;
    overflow-x: hidden;
}

/* Base nav styles */
.nav-list {
    display: flex;
    list-style: none;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    background-color: #222;
}

.nav-list li a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.nav-list li a:hover {
    background-color: #444;
    border-radius: 5px;
}

/* Hamburger menu styles */
.menu-toggle {
    display: none;
    font-size: 2rem;
    color: white;
    padding: 1rem;
    cursor: pointer;
}

/*** Page Acceuil ***/

#acceuil {
    height: 100vh;
    background: #bdc3c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

ul{
    margin-top: -0%;
    display: flex;
    justify-content: center;
    flex-direction: row;   
    gap: 5%;
    list-style: none;
    height: 5vh;
    background-color: rgb(255, 255, 255);
}

li {
    position: relative;
    top: 25%;
    color: red;
}

#nom {
    background-color: white;
    border-radius: 15px;
    position: relative;
    top: 40%;
    left: 15%;
    transform: translate(35% 35%);
    width: 50%;
}


/*** Page Profil ***/

.presentation {
    position: relative;
    top: -5%;
    background-image: url(../Images/presentation.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 15vh;
}

#presentation {
    color: rgb(255, 255, 255);
    font-size: 3em;
    text-align: center;
    position: relative;
    top: 35%;
}

#moi {
    position: relative;
    top: 5%;
    left: 10%;
    transform: translate(30% 35%);
    display: flex;
    gap: 5%;
}

#photo {
    width: 150px;
    height: 150px;
    border-radius: 100px;
}

#cv {
    display: flex;
    gap: 5%;
    position: relative;
    top: 25%;
    left: 40%;
    transform: translate(50% 50%);
}

/*** Page bts ***/

#btssio {
    margin-left: 5%;
}
#bts {
    display: flex;
    gap: 5%;
}

#option {
    width: 45%;
}

/*** Page projet ***/

#projetdoc {
    margin-left: 5%;
}

#projet {
    display: flex;
    justify-content: center;
    gap: 5%;
}

.card {
    background-color: red;
    width: 45%;
    text-align: center;
}

.card p {
    text-align: center;
}

.imgcard {
    width: 400px;
    height: 350px;
    
}






/*** Responsive mobile ***/

@media (max-width: 768px) {

@media (max-width: 768px) {

/*** Page acceuil ***/

    nav {
        position: relative;
    }

    .menu-toggle {
        display: block;
        background-color: #222;
        text-align: right;
    }

    .nav-list {
        flex-direction: column;
        display: none;
        position: absolute;
        width: 100%;
        top: -300%;
        left: 0;
        height: 100vh;
        background-color: #222;
        z-index: 2;
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li {
        text-align: center;
        padding:  -10%;
    }

/*** Page profil ***/

#moi {
    flex-direction: column;
}

#presenta {
    width: 85%;
}
    
#cv {
    position: relative;
    top: 25%;
    left: 15%;
    transform: translate(50% 50%);
}
}