body {
  background-image: url("gifs/starnight.gif");
  background-size: 500px;
  font-size: 25px;
} /* star background */



.box {
  background-color:black;
  border: outset 10px darkred;
  max-width: 1200px;
  margin: 3vw 17vw;
}

.boxheader {
  background-image: url("gifs/spider.gif");
  background-size: 200px 50px;
  border: inset 10px darkred;
  display: grid;
  justify-items: center;
  padding: 10px;
}
.boxheader a {
  background-color:black;
  text-decoration: none;
  color: darkred;
} 

.boxheader a:hover {
  text-decoration: underline;
}

.t{
  grid-template-columns: repeat(3, 1fr); /* 4 columns */
} /* top boxheader */

.b{
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
} /* bottom boxheader */

.header {
  /* so background is black to fill gaps, padding for shape if you can find a better/more streamlined way to do this do it lol */
  background-color: black;
  background-image: url("gifs/eyes.gif");
  background-position: center;
  background-size: 450px 220px;
  border: outset 10px darkred;
  margin: 7vw;
  margin-top: 4vw;
  margin-bottom: 4vw;
  padding: 55px;
}

.label {
  background-color: darkred;
}

.bottom {
  bottom: 0;
  position: fixed;
} /* bottom marquee find a better way to put this */

.maintext {
  border: solid 5px darkred;
  color: darkred;
  font-size: 22px;
  margin: 1vw;
  padding: 1vw;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 2rem;                              /* space between cells */
  justify-items: center;
  margin: 1vw 6vw;
}

.item {
  align-items: center;
  border: outset 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  max-width: 250px;
  min-height: 150px;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

.item a{
  background-color: black;
  text-decoration: none;
}

.item:hover{
  border-style: inset;
}

.item1 a,.item3 a,.item5 a,.item6 a {color: darkred;} /* red links */

.item2 a,.item4 a {color: lightgray;} /* grey links */

.item1 {
  background-image: url("gifs/candle.gif");
  background-color: black;
  background-size: 150px 150px;
  background-position: left;
  background-repeat: no-repeat;
  border-color: darkred;
} /* black helicopters */

.item2 {
  background-image: url("gifs/hands.gif");
  background-color: black;
  background-size: 100px 175px;
  border-color: black;
} /* mkultra */

.item3 {
  background-image: url("gifs/code.gif");
  background-size: 250px 125px;
  background-repeat: no-repeat;
  background-position: center;
  border-color: darkred;
} /* dead internet */

.item4 { 
  background-image: url("gifs/flowers.gif");
  background-color: black;
  background-size: 100px 125px;
  border-color: black;
} /* kennedy */

.item5 {
  background-image: url("gifs/candle.gif");
  background-color: black;
  background-size: 150px 100px;
  background-position: left;
  background-repeat: no-repeat;
  border-color: darkred;
} /* example5 */

.item6 {
  background-image: url("gifs/candle.gif");
  background-color: black;
  background-size: 150px 100px;
  background-position: left;
  background-repeat: no-repeat;
  border-color: darkred;
} /* example6 */