.header-top{
  font-size: large;
  background: black;
  text-align: center;
  border-bottom: 5px solid purple;
  height: 150px;
}

.btn-xl-pers{
  width: 300px;
  height: 50px;
}

.btn-log {
  margin-right: 45px;
  background: darkblue;
}

.main-page-title{
  margin-top: 50px
}

.footer-band{
  position: absolute;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: rgb(230, 216, 230);
  display: flex; 
}

.main-page-avatar{
  /* text-align: center; */
  margin: auto;
  /* margin-bottom: -50px; */
}

#carouselExampleIndicators {
  display:none;
}

/* Taille d'écran inférieure à 420px */
@media screen and (max-height:420px) {
  .header-top{
    font-size: large;
    background: black;
    text-align: center;
    border-bottom: 5px solid purple;
    height: 50px;
  }

  .header-top img{
   width: 50px;
  }

  #header-top-img-2{
   width: 90px;
   margin-top: 0;
  }

  .footer-band{
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
    background: red;
    display: none;
  }
  
  .main-page-avatar{
    text-align: center;
    /* margin-bottom: -50px; */
  }
}

/* Taille d'écran entre 420px et 500px */
@media screen and (min-height:420px) and (max-height:500px){

  .header-top{
    font-size: large;
    background: black;
    text-align: center;
    border-bottom: 5px solid purple;
    height: 80px;
  }
  
  .header-top img{
    width: 70px;
   }
 
   #header-top-img-2{
    width: 120px;
    margin-top: -30px;
   }

  .footer-band{
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #04BEF5;
  }
  
  .main-page-avatar{
    text-align: center;
    width: 70px;
  }
}

/* Taille d'écran entre 500px et 768px */
@media screen and (min-height:500px) and (max-height:700px){
  .footer-band{
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: rgba(128, 128, 128, 0.5);
  }
  
  .main-page-avatar{
    text-align: center;
    width: 70px;
  }

  #carouselExampleIndicators {
    display:block;
  }
  .carousel-item{
    height: 100%;
    max-height: 400px;
    background: no-repeat scroll center scroll;
  }
  .carousel-item img{
    height: 500px;
  }
  .main-carousel{
    height: 500px;
  }
  .app{
    height: 400px;
    width: 100%;
    background: black;
    margin-top:200px;
    z-index: 99;
  }

}

/* Taille d'écran supérieure à 760px */
@media screen and (min-height:750px) {
  .footer-band{
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
    background: white;
  }
  
  .main-page-avatar{
    text-align: center;
  }
  
  #carouselExampleIndicators {
    display:block;
  }
  .carousel-item{
    height: 100%;
    max-height: 700px;
    background: no-repeat scroll center scroll;
  }
  .carousel-item img{
    height: 700px;
  }
  .main-carousel{
    height: 700px;
  }
  .app{
    height: 700px;
    width: 100%;
    background: yellowgreen;
    margin-top:350px;
    z-index: 999;
  }

}