/*CSS reset*/
body {margin: 0; padding: 0; background-image: url("images/bg.jpg");
}
body *{box-sizing: border-box;}
body p {font-family: monospace;}
img {max-width : 100%;}
header, main, aside, footer, iframe, table, thead, tbody, nav, ul {margin : 0; padding: 0}
a {text-decoration: none;
color: inherit;}
/* Fin CSS reset*/
@font-face{ 
font-family: CabinSketch-Regular;
src: url("CabinSketch-Regular.ttf");
}

header{background-image: url("images/black_bg.jpg");
      background-size: cover; /*background-size: contain permet de  */
      
}
      
header img {display: block;
            margin: auto;
            padding: 20px}
            
/*MEDIA QUERIES*/

@media all and (max-width: 720px){
    header p {font-size:50px}
    header {padding-top : 100px;
      min-height: 90vh;}  
   table td{display: block;
            width: 90%;}

  #burger {left: none;
  right: 1rem;}
                 
    #intro td{display:block;}
    
    #intro #photo-td{height:50%;}
                  
    #intro #text-td{heigh: 50%;}
    
     #trafic td{display:block;}
     
    #concept td{display:block;
                margin-bottom:1rem;
                width: 100%;}
   #cours td{display:block;
             margin-bottom:1rem;
             width: 100%;}
                
    #trafic #photo-td{height:50%;}
    #trafic #text-td{Heigh: 50%;}
  
    .date-concert td.gig {
    width:100%;
    text-align: center;} 
}

@media all and (min-width: 721px) {
 header {min-height: 120vh;} 
     header p {font-size: 40px;
     margin: 2rem;
     text-align: center;}
    header table td {width: 50%}
  
     #bio td{width: 50%;}
     #intro #photo-td{ width:400px;
                      vertical-align:top;}
     #trafic #photo-td{width:400px;
                        vertical-align:top;}
     #concept{border-spacing:32px;}
     #concept td{width: 50%;
                  margin:0;}  
     #cours{border-spacing:32px;}
     #cours td{width: 50%; 
               margin:0;}  
     #news td{vertical-align: top;
max-width: 50%;}
     #pied td {vertical-align: top;}

#lyrics td {vertical-align: top;
max-width: 50%;}

    .date-concert td.gig {
    width:220px;}                      
}
/*FIN DES MEDIAS QUERIES*/

/* DEBUT DES IDENTIFIANTS*/
#burger{
position: fixed;
text-align: center;
font-weight: bold;
top: 2rem;
left: 1rem;
background-color: rgba(0,0,0,0.5);
color: white;
width: 72px;
padding: 16px 8px 0 8px;
border-radius: 8px;
}
#burger:hover{
cursor: pointer;
color: black;
background-color: white;}

#menu {
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.7);
color: white;
position: fixed;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;}

#menu nav {
display: inline-block;
width: 240px;
margin: auto;
padding: 2rem;
background-color: rgba(0,0,0,0.9);
}
#menu p {
font-size: 22px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
border-bottom: 8px double white
}
#menu nav li {
font-size: 22px;
text-transform: uppercase;
line-height: 3rem;
height: 3rem;
text-align: center;
list-style: none;
}

#menu nav li:hover{
color: black;
background-color: white;}

#tête{margin: auto;
}
#close{padding:.5rem;border:1px solid white;}
#close:hover{cursor:pointer;}
#bio {margin: 0; padding:0;}
#bio td {padding: 1rem; box-sizing: border-box}
#bio p{font-size: 20px;
margin: 0}
#trafic{width: 80%; 
        max-width: 1200px; 
        margin: auto;}
        
#trafic td {padding: 1rem;
            box-sizing: border-box;}
#intro{width: 90%;
        margin: auto;
}
#intro td{padding: 1rem;
        box-sizing: border-box;
}
#intro p {font-family : monospace;
 font-size : 20px;
  line-height : 1.5em;
   letter-spacing: 2px;
   margin: 0;}

#black-bg {background-image: url("images/black_bg.jpg");
background-size:cover;
}

/* Ces id ne semblent pas utilisés
#actualité img {width: 400px;
}
#actualité p {padding-left: 10px;
              padding-right: 20px;
              }
*/
#concept {width:80%;
margin: auto;
border-spacing: 32px;
}
#concept td{background-color: #ececdf;
            border: 1px solid #ccc;
            border-radius: .25rem;
            vertical-align: top;
            border: 1px solid black;}
            
#concept td.card {
  background-color: orange;
  color: white;}

#concept h5{text-align: center;
font-size: 25px;
color: orange;
background-color: white;
margin: 0;
padding: 1rem;}
#concept td ul{padding : 0.5rem 2rem 0.5rem 2rem}
#cours td ul {padding: 0.5rem 2rem 0.5rem 2rem;}
#cours {width:80%;
margin: auto;
}
#cours td{background-color: #ececdf;
            border: 1px solid #ccc;
            border-radius: .25rem;
            vertical-align: top;
            border: 1px solid black;}
            
#cours td.card {
  background-color: #4aa809;
  color: white;}

#cours p {text-align: justify;
 font-size: 1.3rem;
  line-height: 1.4em
}

#cours h5{text-align: center;
font-size: 25px;
color: orange;
background-color: white;
margin: 0;
padding: 1rem;}
}

#news table {width: 90%;
            margin: auto;
            margin-bottom: 50px;
            background-color: white;
}

#news td p{margin-top: 0;
margin-bottom:0.5rem;
padding: 15px;
line-height: 1.5rem;
font-family: monospace;
font-size: 15px;
background-color: white;
}

#lyrics {width: 100%;
            margin: auto;
            margin-bottom: 50px;}
            
#lyrics td p{margin-top: 0;
margin-bottom:0.5rem;
padding: 15px;
line-height: 1.5rem;
font-family: monospace;
font-size: 15px;
}

/* FIN DES IDENTIFIANTS*/
#intro .contact {
color: green;
line-height: 2rem;
font-size: 25px;
font-family: monospace;
padding: 20px 60px;
}
#pied .contact {
color: orange;
line-height: 2rem;
font-size: 20px;
font-family: monospace;
padding: 20px 20px;

}

.line {
border-bottom: 5px solid white;
display: block;
margin-bottom: 1rem;}

.pseudobtn:hover{
cursor: pointer;
}
.contact input {width: 100%;
max-width: 720px;
padding: 10px 20px;
font-size: 20px;
}
.contact input[type="submit"]{max-width:120px;  /* syntaxe pour cibler un élément html selon ses attributs */
display:block;margin:auto;} 

.contact input[type="submit"]:hover{
  color:orange;
  background-color:#888;
  cursor:pointer;
  transition:all .3s;
}
  
.contact span {background-color: orange;
}
.contact span:hover{cursor:pointer; background-color: yellow;}

.date-concert{width: 60%;
              margin: auto;
              margin-bottom:25px;
              border: 2px solid #444;
}

.date-concert p{padding: 0 1rem 1rem 1rem;
                margin: 0;
                line-height: 1em
}
.jour{text-align: center;
      font-size: 48px;
}

.mois {text-align: center;
        font-size: 24px;
}

.heure {text-align: center;
        font-size: 24px;
        letter-spacing: 1px;
}

.lieu {text-align: center;
      font-size: 24px;
      font-weight: bold;
}

.infos {text-align: center;
        font-size: 17px;
        padding-top: 2px;
}
.retour {width: 100%;
 top: 0;
  left: 0;
   margin:0;
    padding: 1rem;
    color: orange;
font-weight: bold;
 border: 1px solid orange;
  background-color: black;
   position: fixed;
    text-align: center;}
    
h1{color : white; 
          font-size : 30px; 
          font-family : CabinSketch-Regular;
          padding: 1rem;
          margin-top:0px;
          margin-bottom:20px;
          background-color: rgb(236, 159, 11, 0.9);
          border-color: white;
          border-style: solid;
          border-radius: 20px;
          text-align: center;
}
h2 {color : white; 
          font-size : 30px; 
           font-family : CabinSketch-Regular;
          padding: 1rem;
          margin-top:0px;
          margin-bottom:20px;
          background-color: rgb(236, 159, 11, 0.9);
          border-color: white;
          border-style: solid;
          border-radius: 20px;
          text-align: center;
}
h3 {padding: 1rem;
          color : white;
          font-size : 30px;
          font-family : CabinSketch-Regular;
          text-align: center;
          margin-left: unset;
          margin-top:5px;
          margin-bottom:20px;
          background-color: rgb(236, 159, 11, 0.9);
          border-color: white;
          border-style: solid;
          border-radius: 20px;
}
h4 {padding: 0.5em;
          font-family : sans-serif;
          font-size : 20px;
          text-align: center;
          color : white; 
          margin-left: unset;
          margin-top:20px;
          margin-bottom:20px;   
}

h4 span {background-color: rgba(75, 50, 0, 0.7);
          border-radius: 10px;
          border-color: white;
          border-style: solid;
          border-radius: 20px;
          padding: 1rem 2rem 1rem 2rem;
}
        
h5 {font-family : sans-serif;
          text-align: left;
          font-size: 20px;
          margin: 5px;
}        
main p{text-align: justify;
}
img {max-width:100%;
}



em, strong{color : green;
}
audio {margin: auto;
display: block;
}
time{
display: block;
margin-bottom: 1.5rem;
font-weight: bold;
letter-spacing: 1px;
color: black;}

footer{background-image: url("images/black_bg.jpg");
background-size: cover;
text-align: center;
padding: 1.5rem;
}
 footer p{color :white;
} 
 footer a {color : red
}