*{
  margin: 0;
  /* overflow-x: hidden; */
}
  @media (max-width:600px){

  }
body{
  background-color: black;
}

#gallery{
  -webkit-column-count:4;
  -moz-column-count:4;
  column-count:3;
  
  -webkit-column-gap:20px;
  -moz-column-gap: 20px;
  column-gap: 20px;



}
@media (max-width:1200px){
  #gallery{
    /* overflow-x: hidden; */
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
    
  -webkit-column-gap:16px;
  -moz-column-gap:16px;
  column-gap: 16px;
}
}
@media (max-width:800px){
  #gallery{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
    
  -webkit-column-gap:16px;
  -moz-column-gap:16px;
  column-gap: 16px;
}
}
@media (max-width:600px){
  #gallery{
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;

}  
}
#gallery img,#gallery video {
  width:100%;
  height:auto;
  box-shadow:-3px 5px 15px #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  padding-bottom: 20px;
}




.modal-img, .modal-vid {
  max-width: 100%;
  height: 100%;
  display: block;
  margin: auto; /* Center the image horizontally */
}

.modal-content{
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
  border: none;
}