:root{
  --page-width: 70%;
  --gutter: 2%;
  --left-width: 65%;
  --right-width: 30%;

  /* Alignment controls */
  --hero-h: 320px;   /* top-left block height */
  --album-h: 190px;  /* top-right album height */
  --desc-h: 65px;   /* top-right description height */
  --panel-h: 500px;  /* About Me and Links height */
}

html,body{
  height:100%;
  margin:0;
}

/* Allow normal document flow to scroll */
body{
  /* was: display:flex; align-items:center; justify-content:center; */
  display:block;
   color: #2c2c2c;
  font-family: "Baskerville", serif;
  font-size: 16px;
  background-image: url("https://elilenti.neocities.org/webstuff/dilbess-2878dbbe-7652-4f64-90b9-4bbd2508da97.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: contain;
}

/* Centered page container (no fixed height so page can grow) */
.page {
  width: var(--page-width);
  /* was: height: 90vh; */
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  gap: calc(var(--gutter) / 2);
  padding: calc(var(--gutter) / 2);
  margin: 0 auto; /* horizontal center */
}

/* Banner */
.banner {
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  padding: .5rem;
}

/* Content area (columns) */
.content {
  display:flex;
  gap: var(--gutter);
}

/* Left Side */
.left {
  width: var(--left-width);
  display:flex;
  flex-direction:column;
  gap: calc(var(--gutter) / 2);
}

.hero-image {
  border-radius:6px;
  padding:.5rem;
  box-sizing:border-box;
  overflow:hidden;

  /* Let the height grow naturally based on the image */
  height: auto;
}

.hero-img {
  width: 75%;
  height: auto;        /* maintain true proportions */
  display: block;
  border-radius: 4px;
  margin: 0 auto; 
}

.about-me{
  height: var(--panel-h);     /* fixed panel with its own scrollbar */
  overflow:auto;
  border-radius:6px;
  padding:1rem; box-sizing:border-box;
  background-image: url("https://elilenti.neocities.org/webstuff/sectionbackground.png");
  background-repeat: repeat; background-size: cover; background-position: top left;
}

/* Right sidebar */
.sidebar {
  width: var(--right-width);
  display:flex;
  flex-direction:column;
  gap: calc(var(--gutter) / 2);
}


/* Links box: fixed height + scrollbar */
.links{
  height: var(--panel-h);
  overflow:auto; /* scrollbar as requested */
  border-radius:6px; padding:.5rem; 
  box-sizing:border-box;
  background-image: url("https://elilenti.neocities.org/webstuff/sectionbackground.png");
  background-repeat: repeat; background-size: cover; background-position: top left;
}

.description{
  height: var(--desc-h);
  border-radius:6px; 
  padding:.5rem; 
  box-sizing:border-box;
  background-image: url("https://elilenti.neocities.org/webstuff/sectionbackground.png");
  background-repeat: repeat; background-size: cover; background-position: top left;
}


.album{
  /* height: var(--album-h);  <-- leave this removed */
  aspect-ratio: 1 / 1;
  display:flex; 
  align-items:center; 
  justify-content:center;
  box-sizing:border-box;
  border-radius:6px; 
  padding:.5rem;
  background-image: url("https://elilenti.neocities.org/webstuff/sectionbackground.png");
  background-repeat: repeat; 
  background-size: cover; 
  background-position: top left;
}

.album a{
  display:block; 
  width:100%; 
  height:100%;
}

.album-cover{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  border-radius:8px; 
  display:block; 
}



.credits {
  max-height: 8rem;           /* keep it scrollable */
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  border-radius: 6px;
  padding: .5rem;

  /* use the blue section texture instead */
  background-image: url("https://elilenti.neocities.org/webstuff/sectionbackground.png");
  background-repeat: repeat;
  background-size: cover;
  background-position: top left;
}


/* Placeholders for visual clarity */
.placeholder {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:.9rem;
}

.page a {
  color: #631903;
  text-decoration: none;
}

.page a:hover {
  color: #631903;
  text-decoration: underline;
}


/* Responsive */
@media (max-width:900px){
  :root{
    --left-width: 100%;
    --right-width: 100%;
  }
  .content{ flex-direction:column; }

}