@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Delius&family=Kite+One&display=swap');
@font-face {
    font-family: MEDIO;
    src: url(font/MEDIO-VINTAGE.otf);
}
@font-face {
    font-family: MEDIORGH;
    src: url(font/MEDIO-VINTAGE-ROUGH.otf);
}
@font-face {
    font-family: CGR;
    src: url(font/CGR.ttf);
}


:root{
    --vert:#167142;
    --vertc:#529a51;
    --rouge:#630629;    
    --bleu:#13182eCC;
    --bleuc:#4A8794; 
    --jaune:#FC0;
    --orange:rgb(240, 169, 116);
    --rose:#D2754C;
    --noir:#000;
    --dark:#111;
    --beige:#eddcc6;
    --tr-beige:#eddcc6dd;
    

}
html,body{
    background-color: var(--beige);
    color:#bb4734;
    font-family: CGR,sans-serif;

}
body.front{
 background:     
                /* url(images/n-w.png) top left no-repeat , */
                /* url(images/n-e.png) top right no-repeat, */
                url(images/back-b-l.png) bottom left no-repeat ,
                url(images/back-b-r.png) bottom right no-repeat, 
                /* url(images/chicken.png) center 55vh no-repeat, */
                url(images/back-beige.jpg) center center no-repeat
                ;
}
body{
    background:     
                   /* url(images/n-w.png) top left no-repeat , */
                   /* url(images/n-e.png) top right no-repeat, */
                   url(images/back-b-l.png) bottom left repeat-y ,
                   url(images/back-b-r.png) bottom right repeat-y
                   /* url(images/chicken.png) center 55vh no-repeat, */
                   /* url(images/back-beige.jpg) center center no-repeat */
                   ;
   }
   
.navbar{
    background:#3c301f;
}
.container{
    min-height: 100vh;
    /* background-color: var(--rouge);         */
}
.groupes{
        background-color:#3c301f;
        color:var(--beige);    
        font-weight: bold;    
        font-family: MEDIORGH;
}
#indexprog{
    background-color:black;    
    color:#4A8794;    
    font-weight: bold;    
    padding:1em;
    font-family: MEDIORGH;
}
.top{
    font-family: MEDIORGH;
}
p{
    font-family: CGR,sans-serif;
    line-height: 1.8em;
    font-size: 1.2em;    
    background-color: var(--tr-beige);
}
.navbar{
    background-color: var(noir);
    font-family: CGR,sans-serif;
}


.navbar a,
a
{
    color:#bb4734;
}
a:active, a:hover{
    color:#bb4734;
}

@media only screen and (max-width: 576px) {
 }
.Rock{
    font-size:1.4em;
    color:var(--dark);
    display:inline-block;
}
.Folk{
    font-size:1.4em;
    color:var(--beige);
    display:inline-block;
}


#app img{
    filter:sepia(70%);    
}
#app .groupe:hover img{
    filter:none;
    transition: filter .3s;
}
.active{
    border-bottom:2px black solid;
    transition: border-bottom .3s;    
}

.p404{
    color:white;
    font-size:15em;   
}



.orange{
    color:#3c301f;
}

.beige{
    color:var(--beige);
}

.text-box-head{
    font-family: "bebas neue", sans-serif;
    
}
.text-box-subhead{
    font-family: "bebas neue", sans-serif;
    font-size: 2.5em;
}

.rotate-l{
    transform:rotate(-1deg);
}
.border-20{
    border-width:20px;
    border-style:solid;  
    color:rgb(52, 43, 42)
}

.btn-outline-success{
    border-color: #F7CA45;
}

.btn-outline-success:hover{
    background-color: #F7CA45 ;
    border-color: #F7CA45;
}
#indexprog{
    cursor:pointer;
}

.tag{
    color: var(--beige);
    border-radius: 5px; 
    font-size: 0.9em; 
    background: rgb(228, 96, 96);
    padding: 0.2em;
}
.text-border{
    text-stroke:1px var(--beige);
    -webkit-text-stroke:1px var(--beige);
    text-shadow: 1px 1px 2px var(--beige);
}