@charset "UTF-8";
@font-face {
  font-family: 'SansitaOne';
  src: url('./SansitaOne.ttf');
}

body {
    background:#182252;
    margin:0px;
    padding:0px;
  background-image: url(./images/coureurs.png) ;
    background-repeat: no-repeat;
    background-position: left ;
    min-height: 352px;
    font-family: Georgia, serif;
    display: flex;
    flex-direction: column;
}

#BANNER {
      background-image: url(./images/Logo_eau_noire.png);
        background-repeat: no-repeat;
        background-position: 80% 50%;
        background-size: 150px;
        height: 20vh;
        min-height: 200px;
}
#DATA_CONT {
    margin-left: auto;
    margin-right: auto;
    color : white;
    padding: 10px;
    text-align: center;
    font-size: large;
    height: 50vh;
    min-height: 400px;
 /*   background-image: url(./images/coureurs.png) ;
    background-repeat: no-repeat;
    background-position: left ;
    min-height: 352px;*/

}
#DATA_CONT a {color: yellow;}
#DATA_CONT div {margin-top: 20px;}

#FOOTER{
    text-align:center;
    margin-top: 25px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}
#FOOTER img {width: 160px; margin: auto;}
#NAME{
    color : yellow;
    font-weight: bolder;
    text-align: center;
    font-size: 72px;
    font-family: SansitaOne;
    }
.datetime{
    color: cyan;
    text-align: center;
    font-variant: small-caps;
    font-weight: bold;
    font-size: larger;
}
.distance{
    font-weight: bold;
    font-variant: small-caps;
    font-family: SansitaOne;
    font-size : larger;
    color: white;
}
.details{
    color: yellow;
}
@media screen and (max-device-width:480px) {
/** ici les styles qui vont bien **/
}