@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


article {
    grid-area: article;
    flex-direction: row;
}   
article #accueil {
   display: flex ;
}
article #accueil #clochers {
    width: 14vw;
}
article #accueil #clochers #video{
padding: 0;
margin: 0;
margin-left: 15px;
margin-top: 15px;
    width: 12vw;
    height: auto;
/*    background-color: aqua;*/
}
article #accueil #bonjour #image {
    padding: 0;
    margin: 0;
    margin-left: 15px;
    margin-top: 15PX;
    width: 75vw;
    display: flex;
    justify-content: center; 
    align-items: flex-start;

/*    background-color: blueviolet;*/
}
article #accueil #bonjour #image img{
    width: 20vw;
    height: auto;
}
article #accueil #bonjour #texteaccueil {
    padding: 0;
    margin: 0;
    margin-left: 15px;
    margin-bottom: 10px;

    width: 75vw;
    
    height: 8vw;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5vw;
    font-weight: 700;
    border: 2px solid black;
    border-radius: 15px;
    text-align: center;
    text-shadow: 2px 2px 2px yellow;
    font-family: "Georgia";
   
}

article #accueil #bonjour #informations {

    padding: 0;
    margin: 0;
    margin-left: 15px;

    width: 75vw;
    height: 75vw;
    height: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    font-weight: 500;
    border: 2px solid black;
    border-radius: 15px;
    background-color: yellow;
            background-color: #f9d499;

}

article #accueil #bonjour #informations #informations-pdf {
                margin: 0px;
                margin-top: 0px;
                width: 55%;
                height: 100%;    
/*                zoom: 100%;    */
 
}   

/*
            <div id="accueil">
                <div id="clochers">
                    <img src="images/Clochers.gif" alt="Description du GIF" >     
                </div>
                <div id="bonjour">
                    <div id="image">
                        <img src="images/Bonjour.gif" alt="Description du GIF" width="300" height="auto">     
                    </div>   
                    <div id="texteaccueil">
                        <p>L'Unité Pastorale Saint François de Wanze est heureuse de vous accueillir</p>
                    </div>
                    <div id="information">
                        <p>article WANZE 11 22 33 44 55 66 77 88 99</p>
                    </div>

                    </div> 
                </div>
            </div>  
*/