/*
// Mobile : 360 x 640.
// Mobile: 375 x 667.
// Mobile : 360 x 720.
// iPhone X : 375 x 812.
// Pixel 2 : 411 x 731.
// Tablette : 768 x 1024.
// Ordinateur portable : 1366 x 768.
// Ordinateur portable ou de bureau haute résolution : 1920 x 1080.

// Extra Small : pour un écran plus petit que 576 pixels.
// Small : pour un écran plus grand ou égal à 576 pixels.
// Medium : pour un écran plus grand ou égal à 768 pixels.
// Large : pour un écran plus grand ou égal à 992 pixels.
// Extra large : pour un écran plus grand ou égal à 1 200 pixels.
// Extra extra large : pour un écran plus grand ou égal à 1 400 pixels.
*/




/* Au niveau le plus haut du code */
@media screen and (min-width: 992px) {
  
    .introduction {
        margin : 0 10% 0 10%;
        /*background-color:orange;*/			
    }

    .flags img {
        width:20px;
        height:20px;
        margin-right:15px ;
    }

}

@media screen and (max-width: 992px) { /* Mobile jusqu'à 992px (point de rupture bootstrap) */

  
    .introduction {
      margin : 0 5% 0 5%;
      /*background-color:orange;*/			
      }

      .flags img {
        width:25px;
        height:25px;
        margin-right: 20px;
    }



}






html {
    font-size: 18px;
}

body {
    background-color:#000060;
}

.card {
    border:5px;
}

.card-body {
    background-color: #000060;
    border:5px;
}

.card-text {
    color:white;
}

.card-text p {
    font-size: 1em;
}

.card-text h2 {
    font-size: 1.5em;
}

.navbar a {
    color:white;
}

.navbar a:hover {
    color:grey;
}

.navbar a:active {
    color:crimson;
}

.navbar a:visited {
    color:yellowgreen;
}

.navbar {
    background-color: #000080;
}

.flags {
        position:sticky;
        top:0px;
        text-align: left;
        margin-left:3%;
        z-index:8000;
        /* background-color: orange; */
    }


.text-justify { /* Classe supprimée par l'équipe Bootstrap */
    text-align: justify;
    text-justify: inter-word;
}