header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;

    a {
    color:white;
}

}

body{
    p{
        font-size:2em;
    }

}
h1{
    font-size: 6em;
    margin:0;
}

.center{
    text-align:center;
}

.red{
    color:red;
}





.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.grid-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 10px;
}

.grid-container2 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 80%;

    margin: auto;
}

.grid-item2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;

}





.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.flex-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 10px;
    flex: 1 1 200px;
    max-width: 300px;
}


.section .img1 {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: auto;
}


.grid-container3 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgcenter {
    max-width: 50%;
    height: auto;
}

.centerslide{
    width: 30%;
    height: auto;
}

.centerslide2{
    width: 12%;
    height: auto;
}

#complexe {

    body {
        margin-top: 60px;
    }

    #menu{
        position:fixed;
        top:150px ;
        left:0;
        height: 40px;
        z-index: 70;
        width: 100%;
        padding: 0;
        margin:0;
    }

    #menu li {
        display:inline-block;
        margin: 10px;
        color: #000;
        background: rgba(255,255,255, 0.8);
        border-radius: 10px;
    }

    #menu li:hover{
        background: rgba(255,255,255, 0.8);
    }

    #menu li.active,
    #menu li.active:hover{
        background: rgba(0,0,0, 0.5);
    }

    #menu li a{
        text-decoration:none;
        color: #000;
        padding: 9px 18px;
        display:block;
    }

    #menu li.active a,
    #menu li.active:hover a:hover{
        color: #fff;
    }
}