/* # 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; }
#info { grid-area: 2 / 3 / 3 / 10; }
#chat { grid-area: 2 / 10 / 3 / 13; }
#updates { grid-area: 3 / 1 / 4 / 3; }
#blogfeel { grid-area: 3 / 3 / 4 / 10; }
#todo { grid-area: 3 / 10 / 4 / 13; }
#sites { grid-area: 4 / 1 / 5 / 3; }
#rings { grid-area: 4 / 3 / 5 / 10; }
#button { grid-area: 4 / 10 / 5 / 13; overflow: hidden; }
#stamps { grid-area: 5 / 1 / 6 / 13; } 
#foot { grid-area: 6 / 1 / 7 / 13; }

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

/* update box things */
p.date {
  font-size:25px;  
  font-weight:bold;
}
p.updatestuff {
  font-size:20px;
}

/* feelings and blog box. two below it are the parts of it */
#blogfeel {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

#feeling {
  padding: 10px;
  flex: 50%;
}

#blog {
  padding: 10px;
  flex: 50%;
}
/* end of feelings and blog box */