@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
*{
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}
/*------------------------ everything header ------------------------*/
header{
  background-color: #cda63c; /*#272727*/
  position: sticky; /*sticky*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: 85px;
  width: 100%;
  margin-bottom: 80px;
}
.galleryHeader{
  background-color: #cda63c; /*#272727*/
  position: static; /*sticky*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: 85px;
  width: 100%;
  margin-bottom: 80px;
}
#logo-image{
  width: auto;
  height: 70px;
  margin-top: 6.5px;
  transform: translateX(-30px);
}
.navMenu a {
  color: black; /* changes nav menu default font color */
  text-decoration: none;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  width: 130px;
  -webkit-transition: all 0.3s ease-in-out; /*to make white color ease in when hovered*/
  transition: all 0.3s ease-in-out;
  transform: translateY(-25px);
}
.navMenu a:hover {
  color: white; /* #fddb3a */
} 
/*------------------------ everything body ------------------------*/
body{
  background: white;
  text-align: center;
  line-height: 150%;
}
ul,ol{
  text-align: left;
  margin-right: 550px;
  margin-left: 550px;
}
.bodyMargin{
  margin-right: 400px;
  margin-left: 400px;
}
/*------------------------  body gallery ------------------------*/
.wholeGallery{
  margin-left: 50px;
  margin-right: 50px;
}
/* Parent Container */
.content_img{
  position: relative;
  width: auto;
  height: 250px;
  float: left;
  margin: 10px;
}
/* Child Text Container */
.content_img div{
 position: absolute;
 bottom: 0;
 right: 0;
 background: black;
 color: white;
 margin-bottom: 5px;
 font-family: sans-serif;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: visibility 0s, opacity 0.5s linear; 
 transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.content_img:hover{
 cursor: pointer;
}
.content_img:hover div{
 width: %100;
 height: %100;
 padding: 8px 15px;
 visibility: visible;
 opacity: 0.7; 
}
h1{
  font-size: xxx-large;
}
/*------------------------ everything footer ------------------------*/
footer{
  display: flex;
  background-color: #cda63c; /*#272727*/
  font-family: "Montserrat", sans-serif;
  position: static;
  text-align: center;
  height: 150px;
  width: 100%;
  bottom: 0;
  margin-top: 80px;
  align-items: center;
  justify-content:center;
}
a{
  text-decoration: none;
  color: black;
}
iframe{
  width: 100%;
  height: 300px;
}