*{
    margin:0;
    /* padding-left:1vh; */
    box-sizing: border-box; 
}

body{
    min-height: 15vh;
    display: grid;  
    font-size: 1.1vw;
    background-color: rgb(73, 61, 158);
    color:whitesmoke;
    /* max-width: 1200px; */
    /* margin-left: 2vw;  */
}

/* set-up for main content and sidebar to be next to each other. */ 
.page-container { 
    display: flex; /* Creates a flex container */
    gap: 3vw; /* Space between main content and sidebar */
    justify-content: space-between;
}




h1{
    padding: auto;
    font-size: 10vh;
    margin-left:3vw; /* this is because h1 is used for page titles, which don't inherit the main-content margins */
    margin-top:3vh;  
    margin-bottom: 3vh;
}

h2{
    padding: auto;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 1vh;
    font-size: 3vw;
    letter-spacing: .01em;
}

h3{
    padding: auto;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 2vh;
    font-size: 1.6vw;
}

p {
    text-align:left;
    padding: auto; /* maybe this will help make nicer vertical spacing? */ 
    line-height: 1.5;
    margin-bottom: 1vh;
}

a {  /* color of links */
    text-decoration: none;
    /* color: rgb(131, 153, 241);  */
    color: whitesmoke;
}

a:hover { /* color of links when your cursor is on them */
    /* opacity: .85; */
    text-decoration: underline;
}

figure {
    position:relative;
    text-align:left;
    display:inline-block; /* Wrap the figure tightly around the content */
    max-width: 100%;
}


img.framed {
    /* border: 5px solid whitesmoke;       Add a solid border */
    padding: 15px;                /* Add space between the image and the border */
    background-color: rgb(178, 165, 255);    /* Add a background color behind the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    margin-bottom: 2vh;
}

.main-content {
    flex: 1; /* makes  */
    float: left;
    width: 67%; /* Or adjust based on sidebar width */
    margin-left: 3vw;
  }

.sidebar {
    float: right;
    width: 17%; /* Or a percentage, or a specific pixel value */
    padding-left: 3vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    margin-right: 10vw;
    border: 10px solid rgb(255, 242, 175);
    background-color: rgb(178, 165, 255);
    color: rgb(73, 61, 158); 
  }

.sidebar a{
    color: rgb(73, 61, 158);  
}

.coffee-main {
    flex: 1; /* makes  */
    float:left;
    width: 50%; /* Or adjust based on sidebar width */
    margin-left: 10vw;
  }

.coffee-sidebar {
    float: right;
    width: 22%; /* Or a percentage, or a specific pixel value */
    margin-right:8vw;
    padding-left: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    border: 10px solid rgb(255, 242, 175);
    background-color: rgb(178, 165, 255);
    color: rgb(73, 61, 158); 
  }

.coffee-sidebar a{
    color: rgb(73, 61, 158);
}


footer{
    position: relative;
    bottom: 0; /* Position at bottom of page */
    left: 0; /* Left of page */
    margin-bottom: 8vh;

}


.narrow-body { /* for post detail pages, so that text is narrower */
    padding-left: 15vw;
    padding-right: 15vw;
}

.gap_below{
    margin-bottom: 8vh;
}

/* HEADER SETTINGS */

.site-header{
    background-color: rgb(178, 165, 255);
    text-align: center;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative; /* Needed for absolute positioning of search */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
    border-bottom: 20px solid rgb(255, 242, 175);
    border-top: 20px solid rgb(255, 242, 175);
}

.site-title{
    font-size: 15vh;
    margin-bottom: 5vh;
    color: rgb(255, 242, 175);
}

.header-links{
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.header-link{
    font-size: 4vh;
    color: rgb(255, 242, 175);
}

.header-link:hover{
    text-decoration: underline;
}

/* search bar in header */

.header-search {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 300px; /* Control the container width */
}

/* SEARCH BAR SETTINGS */
form{
    margin: 0;
    display: flex;
    flex-grow: 1;
    max-width: 30vw;
}

/* settings for stuff you enter into seach bar */
input{
    width: 100%;               /* Fill available space */
    padding: 0.5rem;           /* Add padding for better appearance */
}