/* === Theme === */
:root {
  --bg: #f5f2e9;             /* creamy warm white base */
  --gradientTop: #faf8f2;    /* soft cream */
  --gradientBottom: #ede7d6; /* light beige */
  --border: #4a3b27;         /* deep earthy brown */
  --accent: #4e5b3e;         /* dark moss green */
  --accent-strong: #3a452c;  /* deeper moss for hovers */
  --highlight: #110F09;      /* near-black for focus outlines */
  --text: #26231b;           /* dark earthy brown */
  --title: #0c0a07;          /* near-black for headings */
}

/* === Body === */
body {
  font-family: "MS PGothic", Verdana, sans-serif;
  font-size: 11px;
  color: var(--text);
  margin: 0;

  background-color: var(--bg);
  background-image: url("https://meva.neocities.org/background%20images%20for%20pages/74eb1e6636f21701d388abbeaffffef7.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
  line-height: 1.45;
}

/* === Global links === */
a {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
}
a:hover,
a:focus {
  color: var(--bg);
  background-color: var(--accent);
  border: 2px solid var(--accent);
  text-decoration: none;
  outline: 2px solid var(--highlight);
  padding: 2px 4px;
  border-radius: 3px;
}

/* === Layout container === */
#layout {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 10px;
  border: 6px ridge var(--border);
  border-radius: 8px;
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* === Header === */
#header2 {
  height: 180px;
  background: url(https://meva.neocities.org/background%20images%20for%20pages/fdb4bbd1d2b18286ae1d1719da7e855e.jpg) no-repeat center/cover;
  border: 3px ridge var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sitename a {
  font: 22px "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--text);
  background: var(--bg);
  padding: 6px 20px;
  border-radius: 30px;
  border: 2px ridge var(--border);
}

/* === Navigation === */
#menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  margin-top: 5px;
  border: 2px ridge var(--border);
  border-radius: 5px;
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}
#menu img {
  height: 24px;
  width: auto;
  display: block;
}
#menu a {
  font: bold 11px monospace, georgia, serif;
  text-transform: uppercase;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  border: 2px solid transparent;
}
#menu a:hover,
#menu a:focus {
  border: 2px solid var(--accent);
  outline: 2px solid var(--highlight);
}

/* === Main Grid === */
#main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-top: 10px;
  flex-grow: 1;
}
#left,
#content {
  padding: 10px;
  border: 2px ridge var(--border);
  border-radius: 5px;
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
  color: var(--text);
}

/* === Titles === */
.title {
  font: bold 11px Verdana, sans-serif;
  color: var(--accent-strong);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  padding-bottom: 2px;
}

/* === Base Scrollbox === */
.scrollbox {
  background: var(--gradientBottom);
  border: 2px ridge var(--accent);
  padding: 8px;
  overflow-y: auto;
  margin-top: 6px;
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--gradientBottom);
}
.scrollbox::-webkit-scrollbar {
  width: 10px;
}
.scrollbox::-webkit-scrollbar-track {
  background: var(--gradientBottom);
  border-radius: 6px;
}
.scrollbox::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
}
.scrollbox::-webkit-scrollbar-thumb:hover {
  background: var(--accent-strong);
}

/* === Left Sidebar: TV shows === */
.tv-scroll {
  height: 900px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tv-scroll img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* === Movies: scrollable sections === */
.movie-scroll {
  height: 430px;
  margin-bottom: 10px;
}
.movie-scroll .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.gallery img,
.movie-scroll .gallery img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* === Footer === */
#footer {
  text-align: center;
  padding: 15px;
  border-top: 2px ridge var(--border);
  margin-top: auto;
  font-size: 0.8rem;
}