.boite {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.navactif {
    display: none;
    font-size: 1em;
    color: white;
    cursor: pointer;
}

.images {
    margin: 10px;
    width: 20%;
    overflow: hidden;
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
    
    .images {
        width: 40%;
    }

    h1 {
        font-size: 7em;
    }
}

@media screen and (min-width: 20px) and (max-width: 799px) {

    .images {
        width: 100%;
        flex-direction: column;
    }

    .navigation {
        display: none;
    }

    .actif {
        display: block;
    }

    .actif ul {
        flex-direction: column;
        width: 100%;
    }

    .actif li {
        width: 100%;
    }

    .navactif {
        display: block;
        font-size: 5em;
    }

    h1 {
        font-size: 5em;
    }

    .copyright {
        width: 2%;
    }

    .social-icons {
        display: flex;
        flex-direction: column;
        width: 2%;
    }

    .social-icons li {
        width: 1100%;
    }
}