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

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

  /* fallback background color */
  background-color: var(--bg);

  /* background image */
  background-image: url("https://meva.neocities.org/background%20images%20for%20pages/26b5f0277986c49df966fc6cf29f1ec8.jpg");
  background-repeat: repeat;      /* tile the image */
  background-size: auto;          /* natural size */
  background-attachment: fixed;   /* stays still when scrolling */
}

/* === Links === */
a {
  font-weight: bold;
  color: var(--accent);
  text-decoration: underline;
}
a:hover, a:focus {
  color: #8c6a1e;                 /* golden mustard for contrast */
  background-color: var(--gradientBottom);
  outline: 2px solid var(--highlight);
}

/* === 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 1fr;
  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);
  
}

#right{
  padding: 10px;
  border: 2px ridge var(--border);
  border-radius: 5px;
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
  color: var(--text);
}
 .image-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);/* two columns */
  gap: 10px;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}

/* === Titles === */
.title {
  font: bold 11px Verdana;
  color: #3a452c;              /* darker moss green */
  letter-spacing: 2px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);

}

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

/* === center image === */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}