/* Body & general page styling */
body {
  margin: 0;
  font-family: serif;
  background: url("/wallpaper.webp") repeat; /* tiled background */
  color: white;
}

/* Page container: sidebar + content */
#page-container {
  display: flex;            
/*  gap: 20px;*/                
  
  max-width: 1000px;
  margin: 20px auto;
}

/* Sidebar styling */
#sidebar {
  flex: 0 0 140px;    
  background-color: #1a1a1a;
  border: 4px groove lightblue;
  padding: 10px;
  
}

/* Sidebar links */
#sidebar a {
  display: block;
  color: white;

  text-decoration: none;
  margin: 4px 0;
}

/* Main content */
#content {
  flex: 1;       
}


/* Individual post */
.post {
  border: 4px groove lightblue;  
  margin-bottom: 20px;
  
  padding: 8px;                    
  background-color: #1a1a1a;      /* only post has black background */
}
.post h1 a {
  color: inherit;        /* take the h1’s text color */
  text-decoration: none; /* remove underline */
  font: inherit;         /* match h1 font size/weight */
}
.post h1 a:visited {
  color: inherit;
}
.post h1 a:hover {
  color: inherit;
  text-decoration: none;
}
.post img{
  max-width: 500px;
}
/* XP-style post header */
.post h1 {
  font-size: 1em;               
  font-weight: normal;          
  margin: 0;                    
  padding: 4px 8px;             
  text-align: left;             
  
  background-color: #1a1a1a;
  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  border: none;                 
  border-radius: 0;             
}
    a:link {
      color: lightblue; /* Example: Sets unvisited links to blue */
    }

/* Topic colors for post headers */
.topic-projects h1 { background: #99cc99; color: black;}
.topic-games h1    { background: #ffcc66; }
.topic-music h1   { background: #cc99ff; }
.topic-thoughts h1 { background: #ff99cc; color: black;}
.topic-writing h1    { background: #66cccc; color: black;}
.topic-art h1     { background: #ff9966; }
.topic-reading h1 { background: #99ccff; color: black;}
.topic-movies h1  { background: #ff6666; }
.topic-articles h1{ background: #ccff99; }
.topic-coding h1{ background: #463f99; }

/* GIF strip under post */
.gif-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center children instead of flex-start */

  background-color: black;
  border: 4px groove lightblue;
  margin-top: 20px auto;        /* center the whole block */
  
}

.gif-strip br {
  flex-basis: 100%;
  height: 0;
}

/* GIF images */
.gif-strip img {
  margin: 5px;
  height: 45px;
  width: auto;
  background-color: black;
}

.gif-strip2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center children instead of flex-start */

  background-color: black;
  border: 4px groove lightblue;
  margin-top: 20px auto;        /* center the whole block */
  
}

.gif-strip2 br {
  flex-basis: 100%;
  height: 0;
}

/* GIF images */
.gif-strip2 img {
  margin: 5px;
  height: 60px;
  width: auto;
  background-color: black;
}