:root {
  /* --show-grid: solid black; */
  --show-grid: 0px;
}

.dropbtn {
    background-color: rgba(139, 165, 145, 0.8);
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius:8px;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: rgba(12, 34, 17, 0.8);
}

.dropdown {
    position: relative; 
    display: inline-block;
}

.dropdown-content {
    display: none; 
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 330px; */
    /* max-width:100%; */ 
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align:center;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}




.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 80px;

    grid-template-areas:
      "nav nav nav nav nav nav"
      "main main main main main main"
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "content3 content3 content3 content3 content3 content3"
      "content4 content4 content4 content4 content4 content4"
      "footer footer footer footer footer footer";
    /* text-align: center; */
    padding-left: 150px;
    padding-right: 150px;
}

#content1{
  padding-bottom:0.1rem;
  padding-top:0.1rem;
}
#dropdownGallery{
  font-size: 1.3rem;
} 

#content2 {
  text-decoration: underline; 
  /* text-align: center; */
  padding: 10px;
  font-size: 1.3rem;
}

#content1, #content2, #content3, #content4, #footer {
  background-color: rgba(246, 238, 209, 0.8); 
  border: var(--show-grid);
  text-align: center;
} 
.galfr_pic {
  width: 55%;
}

.sPicL {
  background-color: rgba(246, 238, 209, 0.8); 
}
.sPicL img {
  width: 90%;
  height: auto;
} 


/* #content3 {
  
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

  
  width: 100%;
  align-items: center;
  text-align: center;
  

  grid-gap: 30px;
} */


select {
  appearance: none; /* remove default appearance set by the browser */
  /* outline: none; remove the outline shown on focus */
  cursor: pointer; /* change the mouse cursor icon */

  
  background-color: rgba(143, 161, 147, 0.3);
  border: 2px solid rgb(1, 44, 4);


  border-radius: 5px;  /* round the border corners */
  padding: 5px 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  
  /* width: 200px;
  height: 40px; */
  box-shadow: 5px 2px 5px rgba(0, 0, 0, 0.8);

  font-family: serif;
  /* font-size: 14px; */
  /* font-weight: bold;  */
  text-align: center;
}



.full-img{
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  position:fixed;
  top:0;
  left:0;
  display:none;
  align-items:center;
  justify-content: center;
  z-index: 100;
  transition: all .3s ease-in-out;
}
.full-img img{
  /* max-height:600px;  */
  max-height:90%; 
  max-width:90%;
  border: 10px solid white;
} 

.PicNavX{
  position:absolute;
  top:5%;
  right:15%;
  font-size: 30px;
  color:rgb(230, 221, 221);
  cursor:pointer;
}
.PicNavF{
  position:absolute;
  top:50%;
  right:15%;
  font-size: 25px;
  color:rgb(250, 250, 250);
  cursor:pointer;
}
.PicNavB{
  position:absolute;
  top:50%;
  right:85%;
  font-size: 25px;
  color:rgb(250, 250, 250);
  cursor:pointer;
} */

.img-sPic{
  border:solid rgb(61, 60, 60) 3px;
  margin: 3px;
  
}
.img-sPic:hover{
  /* transform: scale(0.8) rotate(-15deg); */
  /* border-radius: 20px; */
  box-shadow: 5px 5px 5px rgb(47, 47, 47);
}


#content3 {
  grid-area: content3;

}
#content4 {
  grid-area: content4;

}


@media only screen and (max-width: 1268px) {
  /* ipad/small laptop */ 

  .container {
    padding-left: 20px;
    padding-right: 20px;
  } 
}     

@media only screen and (max-width: 768px) {
      #content1 {
        padding: 0px;
        line-height: 1;
      }

    .container {
        grid-template-columns: 1fr;
        /* grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr; */
        grid-template-areas:
        "nav"
        "main"
        "content1"
        "content2"
        "content3"
        "content4"
        "footer";
        padding-left: 0px;
        padding-right: 0px;
    } 

    
    .galfr_pic {
      width: 95%;
    }

    .img-sPic{
      width:90%
    }


}