/*css UFO : Livres Chronologie - MédiaQueries*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



@media screen and (max-width: 500px) {


    main{
        padding: 0 10px;
    }
    
   .Chapitre{
        font-size: 22px;
        padding: 8px 30px;
        margin: 30px 5%;
    }

    .répartitionDébutAnnée{
        display: none;
    }

    
    .répartition1{
        display: grid;
        grid-template-areas:
        "Année répartitionBlockLivres"
        ;
        display: flex;
        flex-direction: column;
        gap: 8px;

    }

    .AnnéeDébut{
        padding: 0 5px 5px 5px;
        width: 60px;
    }

    .Année2Début{
        font-weight: normal;
        font-size: 12px;
    }  

    .Année{
        grid-area: BlockDebut;
        display: flex;    
        justify-content: start;
        align-items: center;

        background-color: rgb(100, 19, 230);
        border: 2px solid rgb(70, 11, 165);
        box-shadow: rgb(70, 11, 165) 1px 1px 15px inset ;

        border-radius: 12px;

        padding: 5px;

        width: 100%;
        height: 40px;
        }
 
    .Année2 {
        
        color: rgb(237, 252, 250);
        font-weight: bold;
        font-size: 20px;

        padding: 8px 10px;
        
    }

    

    .BlockDebutTitre{
        font-size: 18px;
        width: 100%;
    }

    .BlockDebut{
        width: 100%;
    }

    .répartitionBlockLivres{
        grid-area: répartitionBlockLivres;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;

        padding: 8px;
        margin-bottom: 20px; 
    }
    
    .BlockLivre{
        flex-direction: column;

        padding: 8px;
        margin: 20px 0;

        width: auto;
        height: auto;
    }

    .img{  
        width: 240px;
        height: 320px;
    }

    .DatePublication, .Date{
        font-size: 15px;
    }

    .Auteur{
        font-size: 18px;
    }

    .TitreLivre{
        font-size: 20px;   
    }

    .TitreLivre2{
        font-size: 17px;
        height: auto;
    }

    .InfosLivre{
        font-size: 16px;
    }

    .répartition2, .TitreLivre, .Auteur, .DatePublication, .InfosLivre {
        height: auto;
        width: 240px;
    }

    .DatePublication{
        flex-direction: column;
    }

}