* {
  box-sizing: border-box;
}

body {
  font-family: Georgia, serif;
  margin: 0;
  padding: 0;
  background: url("https://chee64.neocities.org/index_imgs/background1.gif");
}

/* The main container */
.main-container {
  max-width: 1200px;    /* container width */
  margin: 0 auto;       /* center horizontally */
  margin-top: 2%;
  margin-bottom: 2%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;

}

.ArchiveTitle {
   max-width: 70%;      /* ensures it never exceeds the container */
  height: auto;         /* keeps aspect ratio */
  display: block;       /* removes inline spacing */
   margin: 0;            /* remove auto centering */
  padding-left: 0;    
}

/* Row for boxes/images */
.row {
  display: flex;
  flex-wrap: wrap;     

}

.Heading {
   display: flex;         /* make children sit in a row */
 align-items: center;   /* vertically center if needed */
  gap: 45px;
  margin-bottom: 2%;
  margin-top: 2%;
}

.LeftBox {
  flex: 1;               /* takes remaining space */
  padding: 10px;
    background-color: rgba(0, 50, 0, 0.25);
  border: 6px ridge #209945;
  border-radius: 20px;
   color: #FAF5F0;
   line-height: 1.2;
}

.RightBox {
  max-width: 100%;    /* or any width you want */
  height: auto;
  padding: 5px;
   
}

.HeaderLine {
  max-width: 100%
}

.Body {
    display: flex;
  flex-wrap: wrap;            /* allows stacking on small screens */
  align-items: flex-start;     /* align top edges */
  justify-content: flex-start; /* keep items close */
  gap: 20px;                   /* space between image and box */
  margin: 0 auto;
  width: 100%;
}

.LeftColum {
   display: flex;
  flex-direction: column;
  flex: 1 1 20%; /* controls width */
  gap: 20px;
}

.Directory {
   flex: 1 1 10%;              /* takes about 40% of width on large screens */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.Directory img {
 width: 95%;                /* responsive */
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.List {
  background-color: rgba(0, 10, 0, 0.25);
  flex: 2 2 20%;
  padding: 2%;
  border-radius: 20px;
}

.FanWorks,
.Wiki,
.AlbertVids,
.Extras,
.Contact {
  flex: 1;                      /* each takes equal height */
  aspect-ratio: 6/1;          /* makes them perfect squares (or change to 4/3, 3/2, etc.) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* centers image and text vertically */
  background: rgba(0, 50, 0, 0.25);
  border: 6px ridge #C98C00;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  margin: 5%;
}

.FanWorks img,
.Wiki img,
.AlbertVids img,
.Extras img,
.Contact img {
  width: 70%;         /* scales image nicely */
  height: auto;       /* keeps proportions */
  object-fit: contain; /* keeps full image visible */
  display: block;
}

.RightColum {
   display: flex;
  flex-direction: column;
  flex: 1 1 60%; /* controls width */
  gap: 20px;
}

.Info {
   flex: 1 1 70%;              /* takes about 55% of width */
   background-color: rgba(0, 50, 0, 0.25);
  border: 6px ridge #209945;
  border-radius: 20px;
   color: #FAF5F0;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
  line-height: 1.8;
}
.Pics {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr, 1fr;
grid-gap: 20px;
border: 1px solid #ccc;
}

.Pics img {
  background: black;
  padding: 10px;
  text-align: center;
}


@media (max-width: 600px) {
  .container {
    flex-direction: column; /* stack vertically on phones */
  }
  .right-image {
    max-width: 100%;
  }
}