body{
    background-color: #eee;

}

@font-face {
    font-family: 'CossetteTexte';
    src: url('CossetteTexte-Regular.ttf');
}

h1{
    font-family: 'CossetteTexte', Helvetica, sans-serif;
    text-align: center;
    font-size: 150pt;
}

h2 {
    font-family: 'CossetteTexte', Helvetica, sans-serif;
    font-size: 100pt;
    text-align: center;
}

audio{
    display: block;
    margin: auto;
    background: white;
}

p{
    font-family: 'CossetteTexte', Helvetica, sans-serif;
    text-align: center;
    font-size: 50pt;
}

.container {
    position: relative;
    text-align: center;
    color: white;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


/*************** Custom styles ***************/

/*********************************************/
/*************** containers ******************/
/*********************************************/
#tracks-container{
  /* background-image: url('image/KARATE_FIGHT.png');   */
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: 90% 27%;
  padding: 30px 100px;
}

#info-container{
  /* background-image: url('image/LEG_KICK_BRIGHT.png');  */
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: 20% 27%;
  padding: 50px 100px;
}

.tracks-iframe{
    margin: 0 auto; 
    max-width: 100%; 
    width: 960px;
}

.links-container{
    display: flex; justify-content: center;
    margin: 0px auto; max-width: 100%; width: 720px;
    padding-top: 30px;
}

.img-container{
    justify-content: left; 
    display: flex;
    margin: 10px auto; 
    width: 100%;
}
.img-container img{
    width: 100%;
}

#hardware-container{
 justify-content: center;
  margin: 30px auto 90px auto;
}

#hardware-container img{
  max-width: 1080px;
}

#img-header{
    margin: 60px auto;
    max-width: 1360px;
}

 #img-info .title-image{
    margin: 0 auto;
    max-width: 401px;
 }

 



#img-tracks{
    margin: 0 auto;
    margin-bottom: 30px;
    max-width: 653px;
}
#img-tracks .title-image{
    margin-bottom: 30px;
}

#img-info{
    margin: 30px auto;
    max-width: 401px;
}



#img-about{
  margin: 0 auto;
  width: 1080px;
}

#img-about img#sig{
    max-width: 20%;
    margin-right: 50px
}

#img-about img#about{
    max-width: 70%;
}

@media screen and (width <= 800px){ 

 #img-about {
    width: 100%; 
}

#img-about img#about{
    display: block;
    margin: 30px auto;
    width: 750px;
    max-width: 90%;   
}

  #img-about img#sig{
    margin: 30px auto;
    width: 250px;
    max-width: 100%;
    display: block;
 }  

}

/*********************************************/
/*************** images **********************/
/*********************************************/



hr{
    color: #1c1c1c; width: 20em; margin: 30px auto;
}


.centered-text {
    font-family: 'CossetteTexte', Helvetica, sans-serif;
    font-size: 150pt;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(5) scaleX(1.3)
}

body,
html {
    margin: 0;
    padding: 0;
}


.container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}