:root {
  --font-family:"Courier", sans-serif;
  --font-size:x-medium;
  --sidebar-border:2px solid #E6E6C3;
  --link-color:white;
  --bg-color:black;
  --text-color:white;
  --sidebar-bg:transparent;
  --content-bg:transparent;
  --content-padding:0;
  --background-image: none;
  /* for bg image, above would be url('https://b787.neocities.org/Images/background.png'); */
}
body {
  font-family:var(--font-family);
  font-size:var(--font-size);
  background-color:var(--bg-color);
  color:var(--text-color);
  background-image: url('https://b787.neocities.org/Images/background.png');
}
body a {
  color:var(--link-color);
  text-decoration: none;
}
.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:25px;
}
.subtitle {
  font-weight:bold;
  padding-top:3px;
  margin-bottom:5px;
}
.boxwrap {
  padding-left:10px;
  padding-bottom:5px;
}
.footer {
  margin-left: auto; /* Align it to the right side */
  padding: 10px;
  box-sizing: border-box;
  font-size: 0.9em;
  text-align: center;
}
.header {
  display:flex;
  flex-spacing:space-between;
  padding-bottom:10px;
}
.header-left {
  width:70%;
}
.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;
}
 @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;
   }
}

.header-left a:nth-child(1) img {
  content: url('https://b787.neocities.org/Images/home.png');
  transition: 0.2s;
}
.header-left a:nth-child(1):hover img {
  content: url('https://b787.neocities.org/Images/home-select.png');
}

.header-left a:nth-child(2) img {
  content: url('https://b787.neocities.org/Images/photos.png');
  transition: 0.2s;
}
.header-left a:nth-child(2):hover img {
  content: url('https://b787.neocities.org/Images/photos-select.png');
}

.header-left a:nth-child(3) img {
  content: url('https://b787.neocities.org/Images/videos.png');
  transition: 0.2s;
}
.header-left a:nth-child(3):hover img {
  content: url('https://b787.neocities.org/Images/videos-select.png');
}

.header-left a:nth-child(4) img {
  content: url('https://b787.neocities.org/Images/music.png');
  transition: 0.2s;
}
.header-left a:nth-child(4):hover img {
  content: url('https://b787.neocities.org/Images/music-select.png');
}

#slideshow-image {
  width: 480px;
  height: 320px;
  object-fit: cover; /* ensures image covers the box without distortion */
  border: 2px solid #333; /* optional styling */
}