#projets {
    background: var(--white);
}

.projets {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.projets .projetBox {
    margin: 20px 40px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--gradG);
    color: var(--white);
    display: flex;
    flex-direction: column;
}

#projets h2,
#projets h3 {
    margin: auto;
    width: fit-content;
}

#projets h3 {
    font-size: 24px;
    margin: 38px auto 18px;
}

#projets h4 {
    font-size: 20px;
}

.projets .more {
    margin: auto auto 0;
    padding: 20px 0 8px;
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
    font-weight: bold;
    font-variant: all-small-caps;
    font-size: 18px;
}

#Projects .more {
    display: none;
}

.projetBox p {
    text-indent: 32px;
    text-align: justify;
}

.projetBox ul {
    padding: 0 0 15px 0;
}

.projetBox .projectType {
    margin: 12px 0;
}


.projets .waiting {
    box-shadow: 0 0 .2vw 0 var(--lgray),
    0 0 .4vw .3vw var(--dgray),
    inset 0 0 .1vw .1vw var(--lgray),
    inset 0 0 .33vw .1vw var(--dgray);
}

.projets .cancel {
    box-shadow: 0 0 .2vw 0 var(--lred),
    0 0 .4vw .3vw var(--dred),
    inset 0 0 .1vw .1vw var(--lred),
    inset 0 0 .33vw .1vw var(--dred);
}

.projets .ongoing {
    box-shadow: 0 0 .2vw 0 var(--lorange),
    0 0 .4vw .3vw var(--dorange),
    inset 0 0 .1vw .1vw var(--lorange),
    inset 0 0 .33vw .1vw var(--dorange);
}

.projets .completed {
    box-shadow: 0 0 .2vw 0 var(--lgreen),
    0 0 .4vw .3vw var(--dgreen),
    inset 0 0 .1vw .1vw var(--lgreen),
    inset 0 0 .33vw .1vw var(--dgreen);
}

.projets .school {
    box-shadow: 0 0 .2vw 0 var(--lblue),
    0 0 .4vw .3vw var(--dblue),
    inset 0 0 .1vw .1vw var(--lblue),
    inset 0 0 .33vw .1vw var(--dblue);
}


.codecouleur {
    display: flex;
    gap: 5vw;
    margin: 4vh auto;
    width: fit-content;
}

.codecouleur .couleur {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.codecouleur .couleur .color {
    aspect-ratio: 1/1;
    width: 20px;
    flex-shrink: 0;
    background: black;
    border-radius: 100%;
}

.codecouleur .couleur .color.green {
    background: var(--dgreen);
}

.codecouleur .couleur .color.orange {
    background: var(--dorange);
}

.codecouleur .couleur .color.grey {
    background: var(--dgray);
}

.codecouleur .couleur .color.red {
    background: var(--dred);
}

.codecouleur .couleur .color.blue {
    background: var(--dblue);
}


@media (width < 800px) {
    .projets {
        display: flex;
        flex-direction: column;
    }

    #ProjetPart {
        width: 100vw;
        margin: 0;
        padding: 0;
    }
    .projets .projetBox {
        margin: 20px;
        padding: 20px;
    }
}