/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.container {
    display: flex;
    flex-direction: column;
    gap:20px
}

body {
    margin: 0;
    padding-top: 10%; /* Initial padding to prevent content overlap */
    font-family: "Handjet", sans-serif;
    letter-spacing: 4px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
background-image: url("background.webp"); /* Replace with your image path */
  background-repeat: no-repeat; /* Prevents tiling */
  background-size: cover;      /* Scales image to fill the screen */
  background-position: center;  /* Centers the image */
  background-attachment: fixed; /* Optional: parallax effect */
}
.logo {
    text-decoration: none;
    
}
.header {
    display: flex;
    position: relative;
    flex-direction: column;
    order: 1;
    background-color: #cdb384;
    border: 3px solid #d5a514;
    height: fit-content;
    text-align: right;
    padding: 15px;
    width: 60%;
    margin-right: 20%;
    margin-left: 20%;
    text-decoration: none;
     h1 {
        font-size: 3.5em;
  margin-top: -25px; /* Adjust as needed to reduce space between
   header and nav */
   margin-bottom: -0px;
     }
.top-image {
  position: absolute;  /* Allows precise positioning */
  z-index: 10;  /* Ensures it stays on top */
  float: left;  /* Allows text to wrap around the image */
  left: 0;
  transform: translateX(-50%) translateY(-50%);
   }
}
nav{
    order: 2;
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.main-content {
    position: sticky; /* Makes the main content "stick" relative to the viewport */
    order:2;
    width: relative to viewport;
    margin-right: 40%; /* Center the main content */
    margin-top: 2%;
    margin-left: 10%;
    padding: 20px;
    background: #cdb384;
        border: 3px solid #d5a514;

}

/* floating side bar */
.sidebar {
width: relative to viewport; /* Set the sidebar width */
order:2;
  background-color: rgb(221, 186, 57);
  padding-right: 20px;
  padding-left: 10px;
  position: fixed; /* Makes the sidebar "float" relative to the viewport */
  transform: translateY(-100%); /* Shifts the sidebar up by half its own height to perfectly center it */
  right: auto; /* Ensure no conflicting positioning */
  left: 50%; /* Position the left edge at the horizontal center of the screen */
  margin-left: 15%; /* Half of main-content width (300px) + gap (10px) */
  /* Or use calc: left: calc(50% + 300px + 10px); for dynamic width */
  border: 3px solid #d5a514;
  height: fit-content; /* Adjust height based on content */
}
/* end of floating sidebar */
.sub-content {
    order:3;
    width: 60%;
    margin-right: 40%;
    margin-top: 2%;
    margin-left: 10%;
    padding: 20px;
    background: #cdb384;
        border: 3px solid #d5a514;
}

.footer {
  color: #fff;
  font-size: smaller;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}