/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

:root {
  --background-color: #ffa800;
  --content-background-color: transparent;
  --sidebar-background-color: transparent;

  --text-color: #111;
  --sidebar-text-color: #111;
  --link-color: #0044aa;
  --link-color-hover: #002266;

  --font: "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Helvetica Neue", Arial, sans-serif;
  --font-size: 15px;

  --margin: 5px;
  --padding: 20px;
  --border: 0px solid #ffa800;
  --round-borders: 0px;
  --sidebar-width: 350px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  min-height: 700px;
  margin: 0;
  padding: var(--margin);
  font-family: var(--font);
  font-size: var(--font-size);
  color: var(--text-color);
  background: var(--background-color);
}

/* -------------------------------------------------------- */
/* LAYOUT GRID */
/* -------------------------------------------------------- */

.layout {
  
  display: grid;
  grid-template-columns: 200px auto;      /* left sidebar + main */
  grid-template-rows: auto 1fr auto;      /* header | content | footer */
  grid-template-areas:
    "header header"
    "leftSidebar main"
    "footer footer";
  gap: 3px;
  width: 650px; /* total width = sidebar + main + gap */
  min-height: 620px;
  margin: 0 auto;
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  width: 647px; /* set fixed width */
  height:41px; /* set height to match your LEFTBAR.png */
  
  background-image: url("https://sauswg.neocities.org/assets/WINDOW%20BAR.png");
  background-size: 100% 100%;    /* scale image to exactly fit box */
  background-repeat: no-repeat;
  background-position: center;

  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  color: var(--sidebar-text-color);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.7em;
  font-weight: bold;

}

.header-image img {
  width: 100%;
  height: auto;
}

header nav {
    font-size: 14px;
}

/* -------------------------------------------------------- */
/* LEFT SIDEBAR */
/* -------------------------------------------------------- */

.left-sidebar {
  grid-area: leftSidebar;
  width: 214px; /* set fixed width */
  height: 571px; /* set height to match your LEFTBAR.png */
  
  background-image: url("https://sauswg.neocities.org/assets/LEFTBAR2x@2x.png");
  background-size: 100% 100%;    /* scale image to exactly fit box */
  background-repeat: no-repeat;
  background-position: center;

  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  color: var(--sidebar-text-color);
}

/* Make inner text boxes fully transparent */
.left-sidebar .sidebar-section {
  background: transparent;   
  padding: 20px;
  border-radius: 0;
  margin-bottom: 20px;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

/* -------------------------------------------------------- */
/* MAIN CONTENT AREA */
/* -------------------------------------------------------- */

main {
  grid-area: main;
  width: 450px;  /* set fixed width */
  height: 571px; /* set height to match your main.png */
  
  background-image: url("https://sauswg.neocities.org/assets/main.png");
  background-size: 100% 100%;    /* stretch image to exactly fit box */
  background-repeat: no-repeat;
  background-position: center;

  border: var(--border);
  border-radius: var(--round-borders);
  padding: var(--padding);
  color: var(--text-color);
}

/* Remove internal white overlays */
main > * {
  background: transparent;
  padding: 0;
  margin-bottom: 1em;
}


/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  padding: 15px;
  background: #fff;
  text-align: center;
  font-size: 0.9em;
}

/* -------------------------------------------------------- */
/* NAVIGATION (simple, clean) */
/* -------------------------------------------------------- */

nav ul {
  list-style: none;
  padding-top: 9px;
  padding-left 3px;
}

nav ul li {
  display: inline-block;
  margin-right: 5px;
}

nav a {
  text-decoration: none;
  
  font-weight: bold;
  color: var(--link-color);
}

nav a:hover {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* MOBILE */
/* -------------------------------------------------------- */

@media (max-width: 1200px) {
 /* -------------------------- */
/* CONTENT AREA */
/* -------------------------- */
.layout-content {
  display: flex;
  flex-direction: row;
  gap: 10px;

  /* Step 2: center the layout horizontally */
  justify-content: center; /* center horizontally */
  align-items: flex-start; /* align top */
  overflow-x: auto;        /* allow horizontal scrolling if needed */
}

  /* Keep sidebar and main fixed size */
  .left-sidebar, main {
    width: auto; /* or keep fixed pixel size */
    height: auto;
  }
}

  main > * {
    background: rgba(255,255,255,0.85);
  }
}