body{
  background-image:url(background.gif);
  text-align:center;
  border-color: #605b5b;
  border-width: 3px;
  border-style:groove;
  border-radius: 2px;
  border-bottom-color: #f5d25c;
  border-top-color: transparent;
}
p {
  color:#ff8100;
  font-size: 23px
}
h2 {
  color:#ffec08;
  font-size: 25px
}
h1 {
  color:#ff7000;
  font-size: 27px
}
h5 {
  color: #d0d0d0;
  text-align: center;
}
h3 {
  color: white;
  text-align: center;
}
h4 {
  color: white;
  text-align: center;
}
h6 {
  color: #f5ff00;
  text-align: center;
  font-size: 35px
}
a{
  color: #ffea00
}
.container {  /* the container of the boxes */
  display: flex;
  grid-gap: 30px;/* idk whats grid but it makes the gap between the 2 stacked boxes and the fanarts */
    transform: scale(0.9); 
    transform-origin: center; 

}
.WOWbox {  /* the exclamation boxes */
  display: flex; /* bruh I have to look this out. dont delete */
  align-items: center;
  width: 992px;
  height: 250px;
  border: 1px solid #605b5b;
  margin: 10px;
  text-align: left;
  padding: 20px; 
}
.left-image {  /* left images */
  max-width: 25%;
  height: auto;
  padding:left; 
  border: none;
}
  .right-image {  /* right images */
    max-width: 100%;
    border: none;
}
.box {
  align-self:right; 
  width: 700px; 
  border: 1px solid #605b5b;
  padding: 10px;
}
.main{
  height="500"
  width: 590px;
  align-self: center;
  border-style: dashed;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color:transparent;
}
.what{ /* what is.... box */
    padding: 20px;
    margin: 70px;
    text-align: center
  }
.noi{
  max-width: 5%;
  height: auto;
  border: none;
}