body {
  background-image: url('/meats/pho1.png');
  background-size: 30%;
  margin-top:2%;
  color:white;
}
  * {
    scrollbar-width: thin;
    scrollbar-color: #b4ff05 #560101;
  }
h5{
  margin: 0;
  Color:white;
  font-style: italic;
  font-weight: bold;
  opacity: .7;
}
#gallery-container { 
  background-color:rgba(0,0,0,.7);
  width:95%;
  height:90vh;
  padding: 1%;
  margin:auto;
  margin-top: 2vw;
  display:grid;
  grid-template-rows: 1fr 5fr;
  grid-template-columns: 3fr 7fr;
  grid:"header header header" auto
    "character-buttons gallery-grid ."
    / auto 1fr 7fr;
    
}


.medium-buttons {
  grid-area: header;
  padding-left: 13%;
}
.character-buttons {
  overflow: auto;
  text-align: center;
}

.medium-buttons .filter-btn{
  border-radius: 10px 10px 0px 0px;
  margin-bottom: 0;
}
.character-buttons .filter-btn {
  width:96%;
  margin-right: 0;
  border-radius: 10px 0px 0px 10px;
}
.filter-btn {
  background-color: #91ff00;
  color: #800022;
  padding: 12px 20px;
  margin: .2em;
  font-family: "Times New Roman";
  font-variant: small-caps;
  font-size: 1em;
}

.filter-btn:hover {
  background-color: white;
  color: red;
}

.filter-btn.active {
  background-color: #a103fc;
  color: #fff;
}



/*colors of tabs*/
.medium-buttons .filter-btn:nth-child(3), .medium-buttons .filter-btn:nth-child(4), .medium-buttons .filter-btn:nth-child(5), .medium-buttons .filter-btn:nth-child(6){
  
}
.medium-buttons .filter-btn:nth-child(7), .medium-buttons .filter-btn:nth-child(8), .medium-buttons .filter-btn:nth-child(9), .medium-buttons .filter-btn:nth-child(10),.medium-buttons .filter-btn:nth-child(11){
  
}
.character-buttons .filter-btn:nth-child(13) {
  background-color: #a103fc;
}
.character-buttons .filter-btn:nth-child(14) {
  background-color: #fc8803;
}
.gallery-grid {
  width: 100%;
  height:100%;
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr);
  grid-template-columns: repeat(4, 1fr);
  overflow: auto;
  border:solid transparent 5px;
}

.gallery-item {
  margin:1%;
  background-color: red;
  height:20vw;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hidden {
  display: none;
}

 /* Style the Image Used to Trigger the Modal */
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    height: 80%;
    margin-top: 2%;
    margin-bottom: 2%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    text-align: center;
    border:solid white;
    width:50%;
    max-width: 1000px;
    color: #ccc;
    padding: 1%;
    overflow: auto;
}


/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  hr{
    margin:1%;
  }
  h5{
    font-size: .5em;
  }
    .modal-content {
        width: 100%;
    }
    .gallery-grid {
      overflow: auto;
      width: 95%;
      height:60vh;
      margin: auto;
      display: grid;
      grid-template-rows: repeat;
      grid-template-columns: repeat(2, 1fr);
  }
    #gallery-container {
      width: 95%;
      height: auto;
      display: block;
   }
  .filter-btn {
    padding: 2%;
    font-size: calc(1em - 1.5vw);
  }
  .medium-buttons{
    text-align: center;
    padding:0 ;
  }
  .character-buttons .filter-btn{
    width:auto;
  }
  .character-buttons .filter-btn, .medium-buttons .filter-btn{
    border-radius: 0 0 0 0;
    padding: 1%;
    min-width: 10vw;
  }
  .gallery-item{
    width: 98%;
    height: 40vw;
    aspect-ratio: 1/1;
  }
}