body
{
    font-size: em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgb(107, 98, 98);
    color:white;
    text-shadow: 2px 2px 4px black;
    display: flex;
    flex-direction:column;
    align-items: center;
    margin: 20px;

}

.nom
{
    text-transform: uppercase ;
}

.gfm-embed
{
    width: 80%;
    height: 50%;
    margin: auto;
    top: 50px;
}

header
{
    display: flex;
    flex-direction:column;
}

header figure
{
    text-align: center;
}

p
{
    margin-bottom: 5px;
    padding-bottom: 5px;
}

p, ul, li, em
{
    color:white;
    word-wrap: break-word;
}


section, aside
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin-bottom: 30px;

    
}

section aside
{
    text-align: center;
}


#cagnotte
{

    display: flex;
    justify-content: space-around;
    flex-direction: row;

}

article
{
    margin: 20px;
    width: 80%;
}

aside
{
    border: dashed;
    border-color: whitesmoke;
    width: 40%;
    padding: 20px;
    margin: 20px;
}



#menu
{
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    min-height: 40px;
    font-size: 1.2em;
}

#menu li
{
    width: 20%;
    text-align: center;
    background-color: rgba(36, 149, 180, 0.225);
    border: 3px rgba(56, 27, 75, 0.114) solid;
    border-radius: 20px / 5px;
    box-shadow: 6px 6px 5px black;
    padding: 10px;
    margin: 10px;
}

#menu li:hover
{
    background-color: rgba(189, 183, 107, 0.225);
    border: 3px rgba(56, 27, 75, 0.114) solid;
    border-radius: 20px / 5px;
    box-shadow: 6px 6px 5px black;
}

img
{
    border-radius: 20px / 5px;
    box-shadow: 6px 6px 5px black;
}

section aside figure
{
    margin: 10px;
    padding: 10px;
}


figcaption
{
    margin: 10px;
    padding: 10px;
    text-align: center;
    font-size: large;
}

em
{
    font-style: normal;
}

strong
{
    font-size: large;
}

h1
{
    font-size: xx-large;
    border-left: 2px rgba(87, 14, 55, 0.2) inset;
    border-bottom: 3px rgba(60, 58, 126, 0.3) ridge;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 5px;
    box-shadow: 6px 6px 4px black;
    padding: 10px;
    margin: 10px;
    background-color:rgb(43, 107, 86);
    text-align: center;
}

h2
{
    font-size: x-large;
    font-weight:bold;
}

h3
{
    font-size: large;
    font-style: oblique;
    font-weight: bold;
    padding: 10px;
    margin: 5px;
    text-decoration:underline;
}


a
{
    text-decoration: none;
    color:rgb(231, 232, 239);
    font-weight: bold;
    font-style:italic;
}

a:hover
{
    text-decoration: underline;
    color:darkgoldenrod;
}

mark
{
    background: none;
    font-style:italic;
    color:whitesmoke;
}


footer
{
    background-color: rgb(62, 36, 36);
    text-align: center;
    width: 35%;
    margin: auto;
    box-shadow: 6px 6px 4px black;
}

footer p:nth-child(2)
{
    border-top-style: dashed;
    border-top-color: yellowgreen;
    background-color: rgba(233, 199, 47, 0.49);
    border-bottom-style: dashed;
    border-bottom-color: yellowgreen;
}

#pied
{
    display: none;
}


@media all and (max-width: 1024px)
{
    body
    {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background-color: rgb(107, 98, 98);
        color:white;
        text-shadow: 2px 2px 4px black;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        margin: 5px;
        width: 100%;
    }



    strong
    {
        font-size: 1.2em;
    }


    header
    {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

    }

    section
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 30px;
        padding: 20px;
        margin: 20px;
        font-size: 1.5em;
    }

    figcaption
    {
        font-size: 1.2em; 
    }

    article
    {
        width: 95%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items:flex-start;
        font-size: 1.5em;
    }

  
    aside
    {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 60%;
        border: dashed;
        border-color: whitesmoke;
        padding: 20px;
        margin-bottom: 30px;
    }

    .banniere
    {
        display: none;
    }

    .nom
    {
        text-transform: uppercase ;
    }



    p, ul, li, em
    {
        color:white;
        word-wrap: break-word;
        width: 100%;
    }

    #cagnotte
    {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0px;
        margin: 0x;
    }

    .gfm-embed
    {
        padding: 10px;
        margin: 10px;
        height: 100%;
        width: 80%;
    }


    #menu
    {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        justify-content: space-around;
        align-items: center;
    }

    #menu li
    {
        width: 80%;
        text-align: center;
        background-color: rgba(36, 149, 180, 0.225);
        border: 3px rgba(56, 27, 75, 0.114) solid;
        border-radius: 20px / 5px;
        box-shadow: 6px 6px 5px black;
        padding: 10px;
        margin: 10px;
        font-size: 1.1em; 
    }

    #menu li:hover
    {
        background-color: rgba(189, 183, 107, 0.225);
        border: 3px rgba(56, 27, 75, 0.114) solid;
        border-radius: 20px / 5px;
        box-shadow: 6px 6px 5px black;
    }

    img
    {
        border-radius: 20px / 5px;
        box-shadow: 6px 6px 5px black;
    }




    h1
    {
        font-size: 2.4em;
        border-left: 2px rgba(87, 14, 55, 0.2) inset;
        border-bottom: 3px rgba(60, 58, 126, 0.3) ridge;
        border-top: none;
        border-right: none;
        border-bottom-left-radius: 5px;
        box-shadow: 6px 6px 4px black;
        padding: 10px;
        margin: 10px;
        background-color:rgb(43, 107, 86);
        text-align: center;
    }

    h2
    {
        font-size: 1.5em;
        font-weight:bold;
    }

    h3
    {
        font-size: 1.3em;
        font-style: oblique;
        font-weight:bold;
        padding: 10px;
        margin: 5px;
        text-decoration:underline;
    }


    a
    {
        text-decoration: none;
        color:rgb(231, 232, 239);
        font-weight: bold;
        font-style:italic;
        
    }

    a:hover
    {
        text-decoration: underline;
        color:darkgoldenrod;
    }

    mark
    {
        background: none;
        font-style:italic;
        color:whitesmoke;

    }


    footer
    {
        background-color: rgb(62, 36, 36);
        text-align: center;
        box-shadow: 6px 6px 4px black;
        width: 80%;
        margin: auto;
        font-size: em;
    }

    #pied
    {
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;    
        flex-wrap: wrap;
        width: 70%;

    }

    footer p:nth-child(2)
    {
        border-top-style: dashed;
        border-top-color: yellowgreen;
        background-color: rgba(233, 199, 47, 0.49);
        border-bottom-style: dashed;
        border-bottom-color: yellowgreen;
    }


}