/* # 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; }
#learn { grid-area: 2 / 3 / 3 / 10;}
#funfacts { grid-area: 2 / 10 / 3 / 13;}
#quizzes { grid-area: 3 / 1 / 5 / 6;}
#interests { grid-area: 3 / 6 / 4 / 10;}
#userboxes { grid-area: 4 / 6 / 5 / 10; overflow: hidden;}
#fanlisting { grid-area: 3 / 10 / 5 / 13;}
#watchlist { grid-area: 5 / 1 / 6 / 13;}
#stamps { grid-area: 6 / 1 / 7 / 13; } 
#foot { grid-area: 7 / 1 / 8 / 13; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 200px 480px 280px 200px 350px 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 */
/* about box with yap */
#yap {
  flex: 50%;
  padding:10px;
  margin: 15px;
}
#hazyinfo {
  flex: 50%;
  background-color:white;
  padding:20px;
  margin: 15px;
  overflow:auto;
  border-radius:15px;
}
/* watchlist stuff */
.boxwatchlist {
  display: flex;
  justify-content:center;
}
.completed {
  width: 28%;
  height: 280px; /* minus 10 from todo height in order to line up */
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: left;
  overflow: scroll;
  scrollbar-color: pink snow;
}
.watching {
  width: 28%;
  height: 280px; /* minus 10 from todo height in order to line up */
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: left;
  overflow: scroll;
  scrollbar-color: pink snow;
}
.towatch {
  width: 28%;
  height: 280px; /* minus 10 from todo height in order to line up */
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
  overflow: scroll;
  scrollbar-color: pink snow;
}