body {
    width:100%;
    min-height: 100%;
    background-color: #2d3137;
    color:#fff;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 16px;
}
html{
    box-sizing:border-box
}
*,*:before,*:after{
    box-sizing:inherit
}
.container {
    max-width: 994px;
    margin: 0 auto;
}

header {
    max-width: 994px;
    height: 390px;
    margin: 0 auto;
}

#header-banner{
    background-image: url('images/headerbg.jpg'); /* Replace with your image */
    background-size: cover;
    padding: 20px;
    color: #fff;
    position: relative;

    height: 200px;

    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.seperator{
    clear:both;
    width:100%;
    height: 0px;
    border-bottom:1px solid #6f4d4d;
    margin-top:10px;
    margin-bottom:10px;
}

.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -75px;
    z-index: 200;
    position: absolute;
    margin-left: 25px;
    border: 5px solid #2d3137;
}
  
  .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

#profile-description{
background-color: unset;
font-size: 14px;
}
#profile-description-content{
    width: 100%;
    height: 80px;
    padding-top: 2px;
    padding-left: 215px;
}
.creator-name{
  font-weight: 600;
  font-size:28px;
}


#profile-stats{
    width: 100%;
    padding: 10px 0;
}



.stat-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .stat-data {
    display: inline-block;
    width: 50%;
    text-align: center;
    margin: 0 10px;
  }
  
  .stat-title {
    font-weight: bold;
  }
  
  .stat-content {
    font-size: 18px;
  }

/* POST */



.post-content-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    padding-bottom:70px;
  }
  
  .post {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .post:hover {
    cursor: pointer; /* Change le curseur en main */
  }
  
  .post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .post-txt{
    display: none;
  }

.multipleico{
  position: absolute; /* Set the icon div to absolute positioning */
  top: 10px; /* Position the icon at the top of the parent div */
  right: 10px; /* Position the icon at the right of the parent div */
  width: 20px; /* Set the width of the icon div */
  height: 20px; /* Set the height of the icon div */
  background-size: 20px 20px; /* Set the background size of the icon */
  background-repeat: no-repeat; /* Ensure the icon doesn't repeat */
  z-index: 1; /* Ensure the icon is displayed on top of the image */
  background-image: url("images/ico/mulitplepictico.png");
  background-size: 20px 20px; /* Set the background size to 20x20px */
  background-repeat: no-repeat;

}
.MorePict{
  display: none;
}

/* modal */

/* Style du modal */
.modal {
  display: none; /* Masquer le modal par défaut */
  position: fixed; /* Positionner le modal en plein écran */
  z-index: 300; /* Mettre le modal au-dessus de tout le contenu */
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh; /* Hauteur maximum de l'écran */
  overflow: auto; /* Autoriser le défilement si la photo est trop grande */
  background-color: rgba(0, 0, 0, 0.9); /* Arrière-plan sombre */
}

.modal-content {
  margin: 0 auto; /* Centrer le contenu du modal */
  max-width: 800px; /* Largeur maximum du contenu */
  max-height: 100vh;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-content img{
  max-height: 80vh;
}

.close {
  color: #aaa;
  /*float: right;*/
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

#modal-image {
  max-width: 100%;
  max-height: 95vh; /* Hauteur maximum de l'écran */
  margin: 0 auto;
  display: block;
}

.modal-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* ajuster la valeur de gap pour la séparation souhaitée */
}

.modal-content {
  grid-template-columns: 600px 300px;
}
.modal-left {
  grid-column: 1;
}
.modal-right {
  grid-column: 2;
}
/* /modal */



footer{
    width: 100%;
    height:70px;
    position: sticky;
    bottom:0;
    background-color: #2d3137;
    padding-top:17px;
    border-top: 1px solid #585d65;
}
.footer-container{
  width:994px;
  margin: 0 auto;
}
  
  .footer-column {
    width:50%;
    float:left;
  }
  
  .button-container {
    display: flex;
    justify-content: flex-end;
  }
  
  .blue-button {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin-right: 10px;
  }
  

  .round-button {
    position: relative; /* Position the lines relatively */
    padding: 10px 20px; /* Add some padding to the button */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #4CAF50; /* Green background color */
    color: #fff; /* White text color */
    cursor: pointer; /* Change the cursor to a pointer */
  }
  
  .round-button::after {
    content: ""; /* Empty content to create the lines */
    display: block; /* Display the lines as a block */
    width: 10px; /* Width of the lines */
    height: 2px; /* Height of the lines */
    background-color: #ccc; /* Color of the lines */
    position: absolute; /* Position the lines absolutely */
    top: 50%; /* Position the lines at the middle vertically */
    left: 50%; /* Position the lines at the middle horizontally */
    transform: translate(-50%, -50%); /* Center the lines */
  }
  
  .round-button::after:nth-child(1) {
    margin-top: -6px; /* Space between the lines */
  }
  
  .round-button::after:nth-child(2) {
    margin-top: 0; /* No space for the middle line */
  }
  
  .round-button::after:nth-child(3) {
    margin-top: 6px; /* Space between the lines */
  }



/* menu */
#menu {
  position: absolute;
  top: auto; /* Supprimer la position bottom */
  bottom: 8px; /* Supprimer la position bottom */
  right: 0; /* Positionner le menu à droite de la page */
  width: 250px; /* Largeur du menu */
  height: 160px; /* Hauteur du menu */
  background-color: #4CAF50; /* Fond noir */
 /* background-color: #675c5c; */ /* Fond noir */
  padding: 10px; /* Espacement intérieur */
  border-radius: 5px; /* Arrondir les coins du menu */
  /* Ajouter une marge pour décaler le menu par rapport au bouton */
  margin-bottom: 20px;
}

#menu {
  padding: 0 20px; /* Réduire l'espace à gauche et avoir la même marge à droite qu'à gauche */
}

/* Style des éléments de liste du menu */
#menu ul{
  padding-left:0px;
}
#menu li {
  list-style: none; /* Supprimer les points des éléments de liste */
  border-bottom: 1px solid #ccc; /* Ajouter une ligne de séparation entre chaque élément */
  padding: 10px; /* Espacement intérieur */
}

/* Supprimer la ligne de séparation du dernier élément */
#menu li:last-child {
  border-bottom: none; /* Supprimer la ligne de séparation du dernier élément */
}

/* Cacher le menu par défaut */
.hidden {
  display: none;
}

/* Cacher le menu par défaut */
.hidden {
  display: none;
}

/* Cacher le menu par défaut */
.hidden {
  display: none;
} 


  

  @media only screen and (max-width: 993px) {
    header {
      width:100%;
      height: 290px;
    }
    #header-banner{
      height: 130px;
      -webkit-border-bottom-right-radius: 0px;
      -webkit-border-bottom-left-radius: px;
      -moz-border-radius-bottomright: 0px;
      -moz-border-radius-bottomleft: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  
    .container{
        width:100%;
        padding:0 5px;
    }

    .profile-picture {
        width: 130px;
        height: 130px;
        margin-top: -65px;
        margin-left: 5px;
    }
    #profile-description-content{
      padding-left: 155px;
    }
    .creator-name{
      font-weight: 600;
      font-size:22px;
      overflow: hidden;
    }
    
    #profile-stats{
      width: 100%;
      padding: 2px 0;
    }

    .post-content-container  {
      /*grid-template-columns: repeat(2, 1fr);*/
    }
    .post {
      /* Add any additional styles for smaller devices here */
      
    }

    .modal-content {
      grid-template-columns: 1fr;
    }
    .modal-left, .modal-right {
      grid-column: 1;
    }

    .footer-container{
      max-width:100%;
      padding-left:5px;
      padding-right:5px;
    }

    #menu {
      right:5px;
    }
  }