:root {
    --font-family:"Verdana", sans-serif;
    --font-size:x-small;
    --sidebar-border:1px solid #E6E6C3;
    --link-color:blue;
    --bg-color:white;
    --text-color:black;
    --sidebar-bg:transparent;
    --content-bg:transparent;
    --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;
  }
  .box {
    width:200px;
    border:var(--sidebar-border);
    margin-bottom:15px;
    padding-bottom:10px;
    background-color:var(--sidebar-bg);
  }
  .flex {
    display:flex;
  }
  .container {
    max-width:700px;
    margin:0 auto;
  }
  .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;
  }
  
  .header {
    display:flex;
    flex-spacing:space-between;
    padding-bottom:10px;
  }
  .header-left {
    width:60%;
  }
  .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:130px;
    display:block;
  }
  .profile-pic {
    max-width: 70%; 
    height: auto; 
    display: block; 
    margin: 0 auto; /* centers the image horizontally within its container */
}
   @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;
     }
  }