html {
  margin: 0;
  padding: 0;
}

/* BODY BACKGROUND IMAGE */
body {
  background-color: #1d1f2e;
  background-image: url("images/mahkeo-rpVQJbZMw8o-unsplash.jpg");
  background-position: center;
  /* background-size: 95%; */
  background-size: 80vh;
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 10px;
  padding: 20px 20px 20px 20px;
  border: 10px;
}

/* #container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    ". title title ."
    ". quote quote ."
    "sidebar threejsDiv threejsDiv sidebar2"
    "sidebar main main sidebar2"
    ". article article ."
    "footer footer footer footer";
  grid-gap: 1px;
  margin: 0 auto;
  position: relative;
} */

/* Because #threejsDiv is now 'fixed', it leaves a hole in your grid. */
/* We need to ensure the Grid doesn't collapse or shift weirdly. */
#container {
  display: grid;
  /* Keep your grid tracks, but threejsDiv area will now just be 'empty space' 
     that the fixed div sits on top of. */
  height: auto;
  /* Changed from 100vh to allow page to grow with content */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* RESTORED: Using your original 8-row structure strategy */
  grid-template-rows: repeat(8, auto);
  grid-template-areas:
    "header header header header"
    ". title title ."
    ". quote quote ."
    "sidebar placeholder placeholder sidebar2"
    "sidebar main main sidebar2"
    "footer footer footer footer";
  grid-gap: 20px;
  margin: 0 auto;
  /* FIX 3: Ensure the container allows the z-index to work */
  position: relative;
  z-index: 0;
}

/* Create a placeholder in the grid so the layout stays intact */
.grid-placeholder {
  grid-area: placeholder;
  height: 350px;
  /* Matches the height of your ThreeJS div */
}

header {
  grid-area: header;
  /* position: sticky; */
  top: 0;
}

nav {
  align-content: left;
  grid-area: nav;
}

.guest-nav {
  display: flex;
  flex-shrink: 2;
  flex-wrap: wrap;
  width: auto;
  padding: 4px 10px;
  margin: 0px 10px;
  border: 1px solid rgb(155, 144, 132);
  border-radius: 4px;
  box-sizing: border-box;
  background-color: rgb(66, 65, 65);
  justify-content: space-between;
}

.nav-btn {
  display: flex;
  flex-shrink: 2;
  color: rgb(247, 244, 217);
  background-color: rgb(95, 94, 94);
  padding: 5px;
  border: 2px solid rgb(167, 155, 142);
  margin: 8px 0px;
  justify-content: space-between;
}

.home-guest-page-title {
  display: flex;
  flex-grow: 0;
  align-items: center;
  color: rgb(247, 244, 217);
  justify-content: center;
  padding: 5px;
  border: 1px solid rgb(155, 144, 132);
  margin: 10px 8px;
  max-height: fit-content;
  background-color: #424141;
  grid-area: title;
  /* position: sticky; */
}

.quote-info {
  display: flex;
  flex-direction: column;
  grid-area: quote;
  /* Added height constraints to prevent stretching on mobile */
  height: min-content;
}

.quote-of-the-month {
  color: whitesmoke;
  font-style: italic;
}

.quote-author {
  color: whitesmoke;
  font-style: italic;
}

#sidebar {
  /* For ORIGINAL Text uncomment below */
  /* font-family: Arial, Helvetica, sans-serif; */
  /* For INTER Text uncomment below: */
  font-family: 'Inter', sans-serif;
  /* For ROBOTO Text uncomment below */
  /* font-family: 'Roboto', sans-serif; */
  color: whitesmoke;
  grid-area: sidebar;
  padding: 10px;
}

.sb-links-title {
  color: coral;
}

#threejsDiv {
  /* Using fixed instead of sticky to lock it to the viewport */
  position: fixed;
  /* Center it horizontally */
  left: 50%;
  transform: translateX(-50%);
  /* Vertical position - matches your current layout height approx */
  top: 250px;
  /* Sizing */
  width: 100%;
  max-width: 800px;
  /* Limits width so it doesn't span whole screen on desktop */
  height: 350px;
  border: 0;
  overflow: hidden;
  /* Higher z-index ensures it stays on top of the background */
  /* Lower than header/nav if you want them to scroll over it */
  z-index: -1;
  pointer-events: none;
  /* Allows you to click links/text BEHIND it if they overlap */
}

/* IMPORTANT: For 'sticky' to work in a Grid, the container's align-items 
   should not be 'stretch' (the default). We set it to 'start' for this area. */
#container>#threejsDiv {
  align-self: start;
}

.photo-box {
  display: grid;
  padding: 10px;
  margin: 10px;
  grid-area: photo-box;
}

#archesPhotoL {
  display: grid;
  max-width: 100%;
  height: auto;
  width: auto;
}

#archesPhotoR {
  display: grid;
  max-width: 100%;
  height: auto;
  width: auto;
}

#sidebar2 {
  /* For ORIGINAL Text uncomment below */
  /* font-family: Arial, Helvetica, sans-serif; */
  /* For INTER Text uncomment below: */
  font-family: 'Inter', sans-serif;
  /* For ROBOTO Text uncomment below */
  /* font-family: 'Roboto', sans-serif; */
  color: whitesmoke;
  grid-area: sidebar2;
  padding: 10px;

}

/* main {
  color: whitesmoke;
  grid-area: main;
} */

main {
  /* For ORIGINAL Text uncomment below */
  /* font-family: Arial, Helvetica, sans-serif; */
  /* For INTER Text uncomment below: */
  font-family: 'Inter', sans-serif;
  /* For ROBOTO Text uncomment below */
  /* font-family: 'Roboto', sans-serif; */
  color: whitesmoke;
  grid-area: main;
}

p {
  /* For ORIGINAL Text uncomment below */
  /* font-family: Arial, Helvetica, sans-serif; */
  /* For INTER Text uncomment below: */
  font-family: 'Inter', sans-serif;
  /* For ROBOTO Text uncomment below */
  /* font-family: 'Roboto', sans-serif; */
  color: whitesmoke;
}

/* Ensure the main text areas have a solid-ish background 
   if the 3D object makes the text hard to read as it scrolls past */
main,
#sidebar,
#sidebar2 {
  position: relative;
  z-index: 2;
  /* Keeps text above the ThreeJS div */
  /* background: rgba(29, 31, 46, 0.4); */
  /* Uncomment if you want a subtle tint behind text */
  border-radius: 8px;
}

#article-info {
  display: flex;
  flex-direction: column;
}

.article-title {
  color: burlywood;
}

.article-author {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;

}

.article-date {
  margin: 2px;
  font-style: italic;
}

/* .main-article-content {} */

article {
  color: whitesmoke;
  grid: article;
}

.article-content {
  font-style: italic;
}

#lkm-sign {
  color: #f7f4d9;
  padding: 10px;
  border: 1px solid white;
  margin: 10px 10px 0px 10px;
  /* font-size: 300%; */
  font-family: 'Julius Sans One', sans-serif;
  font-weight: 400;
  text-align: center;
  text-shadow: 3px 3px 3px black;
  background-color: #424141;
}

#sign-line1 {
  font-weight: 400;
  letter-spacing: 3px;
  background-color: rgba(212, 150, 69, 0.562);
  /* background-color: #696967; */
  /* text-shadow: 3px 3px 3px black; */
}

#sign-line2 {
  font-weight: 200;
  background-color: rgba(212, 150, 69, 0.562);
  /* background-color: #696967; */
  /* text-shadow: 3px 3px 3px black; */
}

.h1 {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #696967;
}

.h1.h1 {
  background-color: #696967;
}

.h2 {
  font-family: Arial, Helvetica, sans-serif;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
}

.inner-body-text {
  color: #f7f4d9;
  text-align: center;
}

/* all items in form 1 */
.form1 {
  margin: 0px 0px 0px 0px;
  width: auto;
  /* height: 50%; */
  grid-area: form1;
}

.form-userpass1,
select {
  display: flex;
  width: auto;
  padding: 2px 10px;
  margin: 2px 10px;
  border: 1px solid rgb(155, 144, 132);
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #424141;
}

.form-input1 {
  display: flex;
  justify-content: right;
  width: 33%;
  background-color: #c2b89c2a;
  color: white;
  padding: 8px 10px;
  margin: 0px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.sign-in-button {
  display: flex;
  background-color: #ff8c00be;
  color: #522a0e;
  width: 33%;
  padding: 8px 10px;
  margin: 0px 0;
  display: center inline-block;
  cursor: pointer;
}

.sign-in-,
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* all items in form 2 */
.form2 {
  margin: auto;
  width: 100%;
}

.form-group2,
select {
  /* display: inline-block; */
  color: antiquewhite;
  width: 100%;
  padding: 4px 20px;
  margin: 5px 0px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* box-sizing: border-box; */
}

​.form-label {
  color: #f7f4d9;
}

.form-control2 {
  /* float: right; */
  width: 100%;
  background-color: #c2b89c2a;
  color: white;
  padding: 8px 0px;
  margin: 8px 0px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-control-title {
  color: azure;
  font-size: 5rem;
  font-weight: 500;
}

.submit-button {
  background-color: #ff8c00be;
  color: #522a0e;
  width: 100%;
  padding: 8px 10px;
  margin: 3px 0;
  display: inline-block;
  cursor: pointer;
}

.submit,
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* The alert message box */
.alert {
  width: 95%;
  padding: 10px;
  background-color: #f46c36bb;
  /* Red */
  color: white;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

.text2 {
  text-align: center;
  color: #9b9084;
}

footer {
  display: grid;
  grid-column: 1 / 4;
  grid-row: 11 / 12;
}

/* all items in footer  */
.footer-body {
  /* background-color: #154ea3; */
  border-radius: 10px;
}

.footer {
  text-align: center;
  color: #9b9084;
}

#body-col-rt {
  /* background-color: beige; */
  color: yellow;
}

#body-col-lt {
  /* background-color: beige; */
  color: red;
}

/* @media only screen and (max-width: 700px) {
  #container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "header"
      "title"
      "quote"
      "threejsDiv"
      "sidebar"
      "main"
      "article"
      "sidebar2"
      "form1"
      "footer"
  }
} */

/* --- MOBILE ADJUSTMENT --- */
/* @media only screen and (max-width: 700px) {
  #threejsDiv {
    top: 220px;
    height: 250px;
    width: 90%;
  }

  .grid-placeholder {
    height: 250px;
  }
} */

/* CONSOLIDATED MOBILE ADJUSTMENT */
@media only screen and (max-width: 700px) {
  #container {
    grid-template-columns: 1fr;
    /* Changed to auto to prevent empty rows from stretching content */
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "title"
      "quote"
      "placeholder"
      "sidebar"
      "main"
      "article"
      "sidebar2"
      "form1"
      "footer";
    grid-gap: 15px;
  }

  #threejsDiv {
    top: 220px;
    height: 250px;
    width: 90%;
  }

  .grid-placeholder {
    height: 250px;
  }

  .quote-info {
    /* Ensures the box doesn't grow taller than its text content */
    height: auto;
    padding: 10px;
  }
}

/* BELOW THIS COMMENT ARE UNKNOWN OR UNUSED CSS RULES */

/* .body-image {
  background-image: url("images/mahkeo-rpVQJbZMw8o-unsplash.jpg");
} */

/* .guest-nav {
  display: flex;
  width: auto;
  padding: 4px 10px;
  margin: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #424141;
} */

/* canvas {
  background-image: url("/images/mahkeo-rpVQJbZMw8o-unsplash.jpg");
  background-size: 1000px;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 80vh;
  display: block;
  border: 2px solid;
  color: #b4bef3;
} */

/* aside {
  display: grid;
  grid-column: 1 / 4;
  grid-row: 5 / 6;
  color: whitesmoke;
} */

/* .item-a {
  display: grid;
  grid-area: header;
  grid-column-start: 1;
  grid-column-end: 12;
  grid-row-start: 1;
  grid-row-end: 2;
} */

/* #rectangle {
  height: 100px;
  width: 100px;
  color: #f4f5f1;
  padding: 2px;
  margin: 10px;
  border: 5px #424141;
} */

/* all items in the main body */
/* .main-body-translucent {
  margin-left: auto;
  margin-right: auto;
  background-color: #828d7d57;
  border-radius: 10px;
} */

/* affects all inner body items */
/* .main-inner-body {
  margin-left: auto;
  margin-right: auto;
  margin: 20px;
  padding: 10px;
} */

/* .form {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
} */