/* # means you have to use div id
. means use div class
ive already edited the html to reflect tht so dont worry but if you add new stuff keep tht in mind
changed it bcuz # overrides . so its more useful for the individial boxes */

/* grid stuff */
#header { grid-area: 1 / 1 / 2 / 13; }
#menu { grid-area: 2 / 1 / 3 / 3; overflow: hidden; }
#gallerybox { grid-area: 2 / 3 / 4 / 13; background:none; border:hidden; }
#stamps { grid-area: 4 / 1 / 5 / 13; } 
#foot { grid-area: 5 / 1 / 6 / 13; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 200px 480px 280px 85px 45px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  background: transparent;
  max-width:1200px;
  margin:auto;
}

.grid-container > div {
  background-color: #fff5dd;
  border: 5px solid #e34989;
  text-align: center;
  font-size: 30px;
  position:relative;
  padding:10px;
  overflow: auto;}
}
/* grid stuff ends */

/* div for ocs are in main stylesheet */
/* box tht holds those */
#gallerybox {
  display:flex;
  flex-direction: row;
  margin-bottom: -50px;
}
/* this styles the images */
#gallery img {
  width: 90%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  border:10px solid white;
  box-shadow: 6px 6px 2px rgb(227,73,137, 0.3);
  background:white;
  padding-bottom:50px;
  margin-bottom:20px;
}
#gallery {
  flex: 1;

}
.leftgallery {
  background: transparent;
  z-index:1;
}
.rightgallery {
  background: transparent;
}