/* # 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; }
#ocbox { grid-area: 2 / 3 / 4 / 13; background:transparent; border:none; }
#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 */
#ocbox {
  display:flex;
  justify-content:center;
}
/* this sizes the icons to stay in the box */
/* it also positions it for the text to not cry and explode so if it looks funky mess with the margin-top on BOTH of the two below this til it looks good */
#oc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  margin-top:-20px;
}
p.name {
display:block;
margin-top:-30px;
}