@media screen and (max-width: 800px) {
    body{
        --font-size: 16px;
    }
    h2{
        font-size: 1.4rem;
        --margin: 20px;
    }
    nav{
        height: 72px;
    }
    thead{
        top: 72px;
    }
    #spacer{
        display: none;
    }
    #search-input{
        top: 72px;
    }
    #home, #about {
        display: block;
        padding: var(--margin);
        --margin: 40px;
    }
    #home #spacer{
        display: none;
    }
    #left-container, #right-container{
        padding: 0px;
    }

    #right-container{
        background: inherit;
    }
    #right-container article{
        width: 100%;
    }
    #home figure{
        max-width: 100%;
    }

    #home .title, #about .title{
        --title-font-size: 40px;
        margin-bottom: var(--margin);
    }

    #about article{
        left: 0px;
    }

    article {
        width: auto;
        height: auto;
        left: inherit;
        margin: inherit;
    }

    .page {
        width: 100%;
        left: 0px;
    }

    #buttons {
        bottom: 40px;
        right: 18px;
    }

    #buttons button {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .creditypo {
        position: relative;
        width: 100%;
    }
    
    #collection .title, #collection .medias{
        display: block;
        width: 100%;
    }
    #collection .title{
        border-bottom: none;
    }
    #collection figure{
        width: 100%;
    }

    .filter-btn, 
    #filters,
    .filters, 
    .authors,
    .publisher,
    .year,
    .category, 
    .designer, 
    .tools, 
    .dimension, 
    .nbpage, 
    .format {
        display: none;
    }
    table{
        display: block;
        position: relative;
        width: 100%;
        height: 100vw;
    }
    thead{
        height: fit-content;
    }
    tr{
        display: block;
        min-width: 100%;
        min-height: fit-content;
    }
    td, td:first-of-type{
        min-width: 100vw;
        max-width: 100vw;
    }
    td>*{
        display:block; 
        width:100%;
    }

    #collection figure{
        margin-right: 0;
    }
    .fr .first-ten .title::after, 
    .en .first-ten .title::after{
        content: none;
    }
    .first-ten .title:after{
        position: inherit;
    }
}


@media screen and (max-width: 800px) and (orientation : landscape) {
    .title {
        display: flex;
        flex-direction: row;
    }
}