:root {
  --font-family:"Lucida Console", "Lucida Console";
  --font-size:10pt;
  --sidebar-border:1px solid #E6E6C3;
  --link-color:blue;
  --bg-color:#badfd9;
  --text-color:black;
  --sidebar-bg:white;
  --content-bg:white;
  --content-padding:0;
  --background-image:none; 
  /* for bg image, above would be url('site.com/image.jpg'); */
}

body {
  font-family:var(--font-family);
  font-size:var(--font-size);
  background-color:var(--bg-color);
  color:var(--text-color);
  background-image:var(--bg-image);
}
body a {
  color:var(--link-color);
}
.left {
  width:200px;
  display:flex;
  flex-wrap:wrap;
}
/* Adjust the .box to account for the sidebar */
.box {
  width: 200px;
  border: var(--sidebar-border);
  margin-bottom: 15px;
  padding-bottom: 10px;
  background-color: var(--sidebar-bg);
  border-color:#afb5db;
  color: black;
  margin-left: px; /* Adjust based on the width of the sidebar */
}

.flex {
  display:flex;
}
/* Adjust the .container to account for the sidebar */
.container {
  max-width: 500px;
  margin-left: 240px; /* Adjust based on the width of the sidebar */
  flex-wrap: wrap;
}
.right {
  margin-left:10px;
  background-color:var(--content-bg);
  padding:var(--content-padding);
  
}
.subtitle {
  font-weight:bold;
  padding-top:3px;
  margin-bottom:5px;
}
.boxwrap {
  padding-left:10px;
  padding-bottom:5px;
}
.footer {
  text-align:center;
  font-size:8pt;
}

.sidebar {
  position: absolute; /* Fixed position to keep it at the top left */
  top: 120px; /* Adjust as needed */
  left: 9px; /* Adjust as needed */
  width: 200px; /* Adjust as needed */
  background-color: var(--sidebar-bg);
  border: 10px;
  border-color:#afb5db;
  padding: 10px;
  z-index: 1000; /* Ensure it stays on top of other content */
}

.header {
  padding-bottom:10px;
  font-size:10pt;
  text-align:center;
}
.header-left {
  width:60%;
  font-size:10pt;
}
.header-left a {
 font-weight:bold;
}
.header-right {
  text-align:right;
  width:40%;
}
content {
    display:flex;
  margin:0 auto;
  width:700px;
  
}
.post .title {
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  padding-left:10px;
}
.post .date {
  margin-bottom:10px;
}
.entry {
  padding-left:10px;
}
.postFooter {
  padding-top:10px;
  padding-left:10px;
}
.blogring {
  font-size:11px;
  font-weight:bold;
}
.boxwrap img {
  width:38%;
  display:block;
  margin-left: 230px;
  margin-right: auto;
}
.boxwrap img2 {
  width:38%;
  display:block;
  margin-left: auto;
}
 @media only screen and (max-width: 730px) {
   .flex {
     flex-wrap:wrap;
   }
   .right {
     width:100%;
     order:1;
   }
   .left {
     width:100%;
     order:2;
     display:flex;
     flex-wrap:wrap;
     align-self:center;
     justify-content:center;
     margin-top:20px;
   }
}

* {
  box-sizing: border-box;
}

.blog_body {
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.blog_header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.blog_leftcolumn {
  float: right;
  width: 75%;
}

/* Right column */
.blog_rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.blog_fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.blog_card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.blog_row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.blog_footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .blog_leftcolumn, .blog_rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* Blog Posts */
.blog_card {
  background-color: var(--content-bg);
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-title {
  margin: 0 0 10px 0;
  color: var(--link-color);
}

.post-date {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
}

.tags {
  margin-top: 15px;
}

.tag {
  display: inline-block;
  background-color: #afb5db;
  padding: 3px 8px;
  margin-right: 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

.tags-filter {
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--sidebar-bg);
}

.filter-tag {
  cursor: pointer;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: var(--bg-color);
  border-radius: 3px;
}

.filter-tag.active {
  background-color: var(--link-color);
  color: white;
}