html, body {
    margin: 0;
    padding: 0;
    font-family:Georgia, 'Times New Roman', Times, serif;
    overflow-x: hidden;
    color: rgb(44,40,84);
    
}


.outer-wrap {

    min-height: 910px;

    background-image:
    url('tree-top.jpg'),      /* first = top layer */
    url('tree-bottom.jpg'),  /* third layer */
    url('tree-mid.jpg');      /* second layer */
    

    background-repeat:
    no-repeat,
    no-repeat,
    repeat-y;

    background-position:
    right -100px top -115px,   /* top image – matches your old absolute positioning */           /* repeating middle trunk */
    right -100px bottom 0,     /* bottom image – matches your old absolute positioning */
    right -98px top;

     background-size:
    auto,                      /* top image keeps original size */
    auto,                      /* middle keeps original width */
    auto;                      /* bottom keeps original size */

    background-attachment:
    local,     /* middle repeats only inside the scrollable area of THIS element */
    local,     /* not needed for the others, but harmless */
    local;

    background-origin: border-box;
    background-clip: content-box;

}

.sub-wrap {
    display: flex; 
    }

header {
    position: relative; /* keeps logo inside normal flow */
    display: flex;
    align-items: center;
    padding: 30px;
    height: auto;
    box-sizing: border-box;
    font-size: 1.9rem;
    gap: 30px;
    }

.logo {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    object-fit: cover;
    }

nav {
    width: 190px;
    min-width: 190px;
    }

.sidebar ul {
  list-style: none;        /* remove bullets */
  margin: 0;
}

.sidebar a {
  text-decoration: none;   /* remove underline */
  color: inherit;          /* optional: use parent text color */
}

.sidebar li {
  padding: 5px 0;          /* small vertical spacing */
}

/* Slight indent for nested UL */
.sidebar ul ul {
  padding-left: 15px;      /* small indent (adjust as needed) */
  margin-top: 15px;
}

#blog-toggle{
 cursor: pointer;   
}


#blog-arrow {
    line-height: 0;
}

.home-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 30px;
}

.feat-article-div {
    display: flex;
    gap: 20px;
    
    /* This is the magic line */
    width: min(800px, 100% - 80px);
}

.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

.post-content {
width: min(800px, 100% - 80px);
margin-bottom: 120px;
}

.contact-content {
width: min(600px, 100% - 80px);
margin-bottom: 120px;
}

.post-content p {
line-height: 1.6;
}

.content h2 {
    margin-top: 0px;
    padding-top: 0px;
}

.post-content figure {
    float: right;
    display:table;
    margin:auto;
    padding:7px;
    max-width: 100%;
    border-radius: 10px;
}
 
.post-content img {
    display: block;
    max-height: 400px;
    max-width: 100%;
    border-radius: 5px 5px 0px 0px;   
}

.post-content figure figcaption {
    max-width: 100%;
    background: rgb(245, 239, 234);
    font-size: smaller;
    padding: 3px;
    border-radius: 0px 0px 5px 5px;   
}

.home-feat-img {
    height: 160px;
    width: 240px;
    object-fit: cover;
    box-shadow: -10px 10px 10px rgb(44 40 84 / 0.4);
}

.home-feat-title {
    margin: 0;
    padding: 0;
}

.home-feat-sub {
    margin: 8px 0px;
}

.home-feat-body {
    margin-bottom: 8px;
}

.tree-space {
    width: 80px;
    min-width: 80px;
}

footer {
    text-align: right;
    margin-top: -37px;
    color: burlywood;
    padding: 0px 20px;
}



@media (max-width: 500px) {

    .outer-wrap {

background-position:
    right -130px top -125px,    
    right -130px bottom 0,     
    right -128px top;
    }

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

    .feat-article-div {
    flex-direction: column;
    gap: 20px;
    }

}