/* # 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 / 14; }
#sites { grid-area: 2 / 1 / 3 / 2; overflow:hidden; }
#info { grid-area: 2 / 2 / 4 / 13; }
#nav { grid-area: 2 / 13 / 4 / 14; text-align:left; font-size:20px; overflow:hidden; }
#updates { grid-area: 3 / 1 / 4 / 2; }
#webrings { grid-area: 4 / 1 / 5 / 12; overflow:hidden; }
#buttons { grid-area: 4 / 12 / 5 / 14; overflow: hidden; }
#foot { grid-area: 5 / 6/ 6 / 9; text-align:center; }

.grid-container {
  display: grid;
  grid-template-columns: 245px repeat(11, [col-start] 1fr) 245px;
  grid-template-rows: 70px 250px 320px 275px 75px;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  background: transparent;
  max-width:1400px;
  margin:auto;
}

.grid-container > div {
  background: linear-gradient(166deg,rgba(205, 255, 97, 1) 3%, rgba(126, 185, 0, 1) 80%, rgba(23, 138, 0, 1) 100%);
  box-shadow: inset 0 0 8px #D7FF80;
  border: 5px ridge green;
  border-radius:15px;
  text-align: center;
  font-size: 20px;
  position:relative;
  padding:10px;
  overflow: auto;
}
/* grid stuff ends */

#sites #lightgreenbox {
  height:100px;
  overflow-y:scroll;
}

#tbn img {
      width: 100%;
      height:70px;
    object-fit: cover;
    overflow: hidden;
}