/*global*/
*{
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal;} 

/*arrièreplan*/
*{   
    body{
        background-color: #ffffff;  }}

/*liens*/
*{
    a{
        text-decoration: none;
        color: #313333;}
    a:hover{opacity: 50%;}}

/*bannière*/

*{
    header {
        background-image: url(Images/banner.jpg);
        background-size:cover;
        background-position: top;
        background-repeat: no-repeat;}
    #banniere {
        color: #ffffff;
        background-color: #31333388;
        font-size: 4em;
        font-weight: 400;
        text-wrap: nowrap;
        padding: 0.5em;}}
    
/*menus et boutons*/
*{
    #navigation,#sectionContacts{
        background-color: #004c5f;
        border-top: 4px solid #ffffff;
        border-bottom: 4px solid #ffffff;
        display: flex;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0.5em;}
    #navigation button,#sectionContacts button{font-size: 3em;}
    button {
        color: #313333;
        text-align: center;
        background-color: #ffffff;
        width: 8em;
        border: 2px solid #004c5f;
        border-radius: 8px;}
    button:hover{opacity: 50%;}
    #boutonDemonstrations {
        display: flex;
        flex-direction: column;
        align-items: center;}
    .sousMenu {
        font-size: 3em;
        color: #ffffff;
        width: 8em;
        border-bottom: 2px dotted #ffffff;
        padding-left: 0.5em;
    }
    #sectionContacts{gap: 1em;}
    
    .hashtagsJavascript {
        color: #ffffff;
        font-size: 35px;
        background-color: #DA43CC;
        width: 5em;
        border: 2px solid #DA43CC;
        padding-left: 0.5em;
        padding-right: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;}
    .hashtagsPython {
        color: #ffffff;
        font-size: 35px;
        background-color: #9E2EBE;
        width: 5em;
        border: 2px solid #9E2EBE;
        padding-left: 0.5em;
        padding-right: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;}
    .hashtagsCPlusPlus {
        color: #ffffff;
        font-size: 35px;
        background-color: #5533BF;
        width: 5em;
        border: 2px solid #5533BF;
        padding-left: 0.5em;
        padding-right: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;}}


/*présentation de la page principale*/
*{
    .blocDeTexte{
        color: #ffffff;
        font-size: 2em;
        font-weight: 300;
        text-justify: center;
        background-color:#313333;
        border-radius: 30px;
        box-shadow: 5px 5px 5px #868686;
        padding: 0.75em;
        margin: 0.75em;}
    
    .presentation {
        text-align: center;
    }

    .titreDeSection {
        display: flex;
        align-items: center;
        gap: 20px;
        width: auto;
        margin: 2em;}

    .texteTitreDeSection {
        font-size: 3em;
        font-weight: 500;
        color: #004c5f;
        margin: 0;}

    .ligneTitreDeSection {
        flex-grow: 10;
        height: 4px;
        background-color: #004c5f;
}
}

/*articles de la page principale*/
*{
    article {
        display: flex;
        column-gap: 2em;
        justify-content: center;
        align-items: center;
        background-color: #313333;
        border-radius: 30px;
        box-shadow: 5px 5px 5px #868686;
        padding: 1.5em;
        margin: 1.5em;}   

    .imageArticle {
        justify-self: center;
        align-self: center;
        text-align: center;
        text-justify: center;
        border: 4px solid #ffffff;
        border-radius: 30px;
        width: 99%;}

    .texteArticle {
        justify-self: center;
        align-self: center;
        color: #ffffff;
        font-size: 2em;
        font-weight: 300;
        text-align: center;
        background-color: #004c5f;
        border-radius: 30px;
        padding: 0.5em;}
    
    .texteArticle button{font-size: 1.5em;}

    .hashtagsLangages {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5em;
    }

    .important{color: #00CCFF;}}

   

/*médiaqueries pour mode portrait*/
@media all and (orientation: portrait){
    #banniere {font-size: 5em;}
    #navigation{
        flex-direction: column;
        align-items: center;}
    #navigation button,#sectionContacts button{font-size: 3.75em;}
    .texteArticle button{font-size: 1.25em;}
    #sectionContactsà{
        flex-wrap: wrap;
        justify-content: center;}
    .texteTitreDeSection {font-size: 3.5em;}
    .blocDeTexte{font-size: 2.5em;
        margin: 0.625em;
        padding: 0.625em;}
    article {
        flex-direction: column;
        column-gap: 1em;
        row-gap: 1em;}
    .texteArticle {font-size: 3em;}
}