/* # 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; }
#shrinebox { grid-area: 2 / 3 / 3 / 13; }
#stamps { grid-area: 3 / 1 / 4 / 13; } 
#foot { grid-area: 4 / 1 / 5 / 13; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 200px 480px 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 */

#shrine {
  margin: auto;
  height:480px;
}

/* tabel */
table {
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
}

/* if you change the border ur gonna have to change the styling in the html as well to match */
td {
  border: 3px outset #e34989;
  background-color:#f9bfc8;
  padding: 8px;
}
/* this is where the stamps are held */
td:nth-child(odd), th:nth-child(odd){width:70px;}
/* hover style for the table */
tr:hover {background-color: #ddd;}