body{
    background-color: black;
    font-family: 'Courier New', Courier, monospace;
    margin: 105px 0px 0px 0px;
    color: greenyellow;
    }

    ::-webkit-scrollbar {
    display: none;
    }

    header{
        background-color: black;
        color: white;
        padding: 10px 10px 10px 10px;
        position: absolute;
        position:fixed;
        margin-left: 5px;
        margin-top: -100px;
    }


    h1{
        font-family: "Combat";
        font-weight: 450;
    }

.box-header{
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

    h2{
        font-size: small;
        line-height: 0px;
    }


.Big-title{
    font-size: 150%;
    text-align: center;
    line-height: 5px;
    text-decoration-line: underline overline ;
}





li{
    list-style: none;
    display:inline-block;
    border: 1px solid greenyellow;
    padding: 2px 2px 2px 2px;
    font-weight: 600;
}



    .conteneur-flex{
        background-color: white;
        display: flex;
        flex-wrap: wrap;     
    }
  


    .article-texte{
        visibility: hidden;
        height: 400px;
        overflow-y: scroll;
        
}


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

a:active{
    color: blueviolet;
}






    .article-flex-LBBT{
        background-image: url("images/Le-bon-brute-truand.jfif");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;   
            
    }
    
    .article-flex-LBBT:hover{
        background-image: url("images/Le-bon-brute-truand_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-LBBT:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }
 














    .article-flex-8s{
        background-image: url("images/Les-Huit-Salopards.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;         
    }
    
    .article-flex-8s:hover{
        background-image: url("images/Les-Huit-Salopards_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-8s:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }








    .article-flex-Dj{
        background-image: url("images/django.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;         
    }
    
    .article-flex-Dj:hover{
        background-image: url("images/django_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-Dj:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }







    .article-flex-Mp{
        background-image: url("images/mon-nom-est-personne.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;         
    }
    
    .article-flex-Mp:hover{
        background-image: url("images/mon-nom-est-personne_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-Mp:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }







    .article-flex-QD{
        background-image: url("images/et-pour-quelques-dolar-de-plus.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;         
    }
    
    .article-flex-QD:hover{
        background-image: url("images/et-pour-quelques-dolar-de-plus_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-QD:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }








    .article-flex-LBM{
        background-image: url("images/Little-big-man.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 15px 15px 15px 15px;
        flex: 1 1 300px;
        transition-duration: 1s;         
    }
    
    .article-flex-LBM:hover{
        background-image: url("images/Little-big-man_blur.jpg");
        flex-grow: 5;
        transition-duration: 1s;   
    }

    .article-flex-LBM:hover>.article-texte{
        visibility: visible;
        transition-duration: 1s;
    }





.article-page{
    margin: 30px 30px 30px 30px;
    padding: 10px 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.874);
    color: black;


}

.return{
    border: 1px solid white;
    display: inline-block;
    background-color: black;
    
}



    
@media (min-width: 200px) and (max-width: 750px){
    body{
        background-color: black;
    }
}

@font-face {
	font-family: 'Combat';
	src: url(Fonts/Combat.otf);
}