body {
    font-family: arial;
}

.container-fluid {
    width: 100%;
    padding: 0px;
}

.container-logo, .container-img, #divText {
    text-align: center;
}

#divText {
    font-weight: bold;
    color: #000000;
    margin-bottom: 1em;
}

.container-fluid a:hover {
    text-decoration: none;
}

.container-img {
    background-image: url(img/background-map-prelude.jpg);
    background-repeat: repeat;
}

#logo {
    max-height: 200px;
    margin: 0px;
    padding: 0px;
}

.img-fluid {
    padding: 3em;
}


/*écran moins 450px*/
@media screen and (max-height: 450px) {
    .img-fluid {
    max-height: 280px;
    }
    #logo {
    max-height: 80px;
    }
}

/*écran entre 450 et 550px*/
@media screen and (min-height: 450px) and (max-height: 550px) {
    .img-fluid {
    max-height: 300px;
    }
    #logo {
    max-height: 100px;
    }
}

/*écran entre 550 et 650px*/
@media screen and (min-height: 550px) and (max-height: 650px) {
    .img-fluid {
    max-height: 380px;
    }
    #logo {
    max-height: 120px;
    }
}

/*écran entre 650 et 750px*/
@media screen and (min-height: 650px) and (max-height: 750px) {
    .img-fluid {
    max-height: 460px;
    }
    #logo {
    max-height: 140px;
    }
}

/*écran entre 750 et 850px*/
@media screen and (min-height: 750px) and (max-height: 850px) {
    .img-fluid {
    max-height: 540px;
    }
    #logo {
    max-height: 160px;
    }
}

/*écran entre 850 et 950px*/
@media screen and (min-height: 850px) and (max-height: 950px) {
    .img-fluid {
    max-height: 620px;
    }
    #logo {
    max-height: 180px;
    }
}

/*écran mini 950px // mon PC*/
@media screen and (min-height: 950px) {
    .img-fluid {
    max-height: 700px;
    }
}