:root{
  --canvas-width: 1236px;      /* total outer rectangle width (match image) */
  --canvas-height: 597px;      /* total outer rectangle height (match image) */
  --border-thickness: 8px;     /* thick outer border (change to 6,10 etc to test look) */
  --sidebar-width: 260px;      /* narrow left column width */
  --rightcol-width: 320px;     /* right image column width */
  --gutter: 12px;              /* gap between columns */
  --inner-padding: 12px;       /* spacing between inner border and content */
  --header-width: 400px;       /* width of header area in top-right */
}

/*site header*/
.site-header { 
  
  max-width:1000px;
  margin:0 auto;
  text-align: right;
  padding: 5px 21px 3px 21px;
  border-radius: 0 0 11px 11px;
  height:auto;
  width:auto;
  position: static;
  top: auto;
  right: auto;
  margin-bottom: 5px;
  background-color: rgba(60, 51, 46, 0.8);
  }
  
.site-header h1{  
  font-size:23px;
  margin-bottom:2px;
  }
  
.site-header h3{ 
  font-size:12px;
  margin-top:2px;
  }

/* ---------- base ---------- */
body {
  background-color: #99A998; /*green-grey*/
  background-image: url('/images/raneneocities.jpg'); /*background image*/
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  color: #ffffff; /*white text*/
  margin: 0; /*removes browser gap*/
  font-family: 'Special Elite', serif;
}

/*sidebar*/
#side {
  width: 70px; /*adjust*/
  background-color: transparent; /*CHANGED, was rgba(60, 51, 46, 0.8) */
  padding: 10px;
  color: #ffffff;
  margin-top: 0;
  height: auto;
  box-sizing: border-box; /*padding included in width*/
  overflow-y: visible; /*scroll if content overflows*/
}

/*separating stripe*/
#stripe{ 
  width: 3px;
  background-color:#ffffff;
  margin-top: 0;
  }

/*main content*/
#main {
  flex: 1; /*take remaining space*/
  background-color: transparent; /*was rgba(60, 51, 46, 0.8)*/
  padding: 21px;
  margin-top: 0;
  margin-left: 10px; /*space between sidebar and main*/
  overflow-y: auto;
  color: #ffffff;
  box-sizing: border-box;
}

/*---------------------*/
/*----POST STYLING-----*/
/*---------------------*/

/*individual post boxes*/
.post{
  background-color: rgba(80, 70, 65, 0.85); /* slightly more opaque for contrast */
  color: #ffffff; /*text color*/
  padding: 21px;
  margin-bottom: 21px; /*space between posts*/
  border-radius: 11px; /*rounded edges*/
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  width: 95%;
}

/*post header/title*/
.post-header {
  font-family: 'Special Elite', serif;
  font-size: 30px;
  margin-top: 0px;
  margin-bottom: 12px;
}

.post-container { 
  display: flex;
  gap:12px;
  background-color:transparent;
  margin-bottom:21px;
  padding: 0;
  border-radius: 0;
  width: 100%;
  }

.post-text-box {
  flex:2;
  background-color: rgba(80, 70, 65, 0.85);
  padding: 21px;
  border-radius: 3px;
  }
  
  .post-meta-box { 
    flex:1;
    text-align:center;
    background-color: rgba(80, 70, 65, 0.85); 
    padding: 21px; 
    border-radius: 3px; 
    }
    
/* container for icon and meta */
.post-info {
  display: flex; /* side-by-side layout */
  align-items: center; /* vertical alignment */
  gap: 12px;
  margin-bottom: 12px;
}

/* icon (image) */
.post-icon {
  border: 0px solid #ffffff;
  border-radius: 0px; /* slightly rounded */
  display: block;
}

/* meta text */
.post-meta p{
  margin: 3px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.95);
}

/* post text paragraphs and headings (notice dots) */
.post-text p, .post-text h3, .post-text h5 {
  margin: 7px 0; /*spacing between paragraph and headings*/
  line-height: 1.4;
  color: rgba(255,255,255,0.95);
}

/*links inside posts*/
.post-text a{
  color: #ffffff;
  text-decoration: none;
}

.post-text a:hover{
  font-style: italic;
  font-weight: bold;
}

/* sidebar link styles */
#side a {
  color: #ffffff;
  text-decoration: none;
}

#side a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* profile heading and bio text */
#profile h2 {
  margin-top: 0;
  font-family: 'Special Elite', serif;
  font-size: 21px;
}

#profile p {
  font-size: 12px;
  color: #ddd;
}


.post {
  background-color: rgba(255, 255, 255, 0.1); /* transparent box */
  border-radius: 20px;
  padding: 20px;
  margin: 30px auto;
  width: 80%;
  color: #fff;
}