body{
        background-color: black;
        font-family:'Courier New', Courier, monospace;
        margin:0px 0px 0px 0px;
        color: white;
        font-size: 14pt;
    }

    .palm{
        cursor: url("images/cursor_palm2.png"), pointer;
    }




    header{
        margin:10px 10px 10px 10px;
        background-color: black;
    }


    .menu{
        background-color: black;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: right;
    }

    .signature{
        position: absolute;
        position:fixed;
        margin-left: 20px;
        margin-top: -46px;
    }


    li{
        list-style: none;
        border: 1px solid white ;
        padding: 3px 8px 3px 8px;
        border-radius: 10px;
        margin: auto 5px auto 5px;
        display: inline;
        
    }

    li:hover{
        text-decoration: underline;
        cursor: pointer;
    }



    ul{
        list-style: none;
        border: 1px dashed white ;
        padding: 3px 8px 3px 8px;
        border-radius: 2px;
        margin:auto;
        display: inline;
        line-height: 20pt;

    }



    .conteneur-flex{
        display: flex;
        flex-wrap: wrap;
        margin: 5px 5px 5px 5px;
    }
  
    .article-flex{
        margin: 5px 5px 5px 5px;
        flex: 1 1 300px;
        transition-duration: 1s;
    }


    .article-flex:hover{
        transition-duration: 1s;
        height: fit-content;
        text-decoration: underline;        
    }

    .image-flex{
        margin: 5px 5px 5px 5px;
        flex: 1 1 500px;
        transition-duration: 1s;
    }





    .article-flex-deux{
        flex: 1 1 320px;
        background-image: url("images/palmiersNOIR2.gif");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition-duration: 1s;
        padding: 10px 10px 10px 10px;
        height: 600px;
    }

    .article-flex-deux:hover{
        background-image: url("images/walk.gif");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition-duration: 1s;
            }


a{
    color: inherit;
    text-decoration: none;
}

a:active{
    color: blueviolet;
}




footer{
    text-align: center;
    border-top: 1px solid white;
}





.title{
    margin: 80px 10px -20px 10px;
    text-align: left;
}






.description-projet{
    margin: 0px 10px 40px 10px;
    max-width: 70%;
    text-align: left;
}


.info{
    margin: -15px 0px 20px 10px;
    text-align: left;
}



.qui{
    text-align: center;
    margin: 140px auto 120px auto;
    width: 320px;

}


h1{
    font-family:"Scotch";
    font-size: 30pt;
    letter-spacing: 1pt;

}



iframe{
    padding-bottom: 75%;
    width: 100%;
}








    
@media (min-width: 200px) and (max-width: 646px){
    .menu{
        text-align: center;
        border-bottom: 1px double white;
        margin: 0px 20px 0px 20px;
        padding-bottom: 20px;
    }

    .signature{
        position: inherit;
margin: 10px 0px 15px 0px;
display: inherit;
text-align: center;
width: inherit;
    }

    header{
        margin:0px 0px -35px 0px;
    }

    .description-projet{
        margin: 0px 10px 40px 10px;
        max-width: inherit;
        text-align: center;
    }

    .title{
        text-align: center;
        margin-bottom: -5px;
    }


    .info{
        text-align: center;
        margin-bottom: 30px;
    }

    .qui{
        text-align: center;
        margin-top: 20px;
        margin-bottom: 0px;
        
    }

    .article-flex-deux{
        margin-top: 20px;
    }
h1{
    font-size: 27pt;
}

}



@font-face {
	font-family: 'Scotch';
	src: url(Fonts/OutrequeLight.ttf);
}