/* ===== Main Body & Background ===== */
body {
  background-image: url('https://img.freepik.com/premium-vector/aesthetic-pastel-blue-tartan-gingham-plaid-checkers-checkered-pattern-wallpaper-illustration-perfect-banner-wallpaper-backdrop-postcard-background-your-design_565280-785.jpg');
  background-color: #F0F8FF;
  font-family: 'DotGothic16', "MS UI Gothic", sans-serif;
  font-size: 14px;
  color: #8d9aa8; /* A softer, more blue-toned grey */
  cursor: url('your-cursor.png'), auto;
  font-smooth: never; -webkit-font-smoothing: none;
}

/* ===== Overall Page Structure ===== */
#page-container {
  width: 850px; /* Slightly narrower for a cozier feel */
  margin: 20px auto;
}

/* ===== NEW: Clean Header Style ===== */
.main-header {
  font-family: 'Press Start 2P', cursive;
  font-size: 20px;
  color: #778899;
  background-color: rgba(255, 255, 255, 0.85); /* White box for header */
  border: 1px dotted #cce0ff; /* Very light blue dotted border */
  padding: 15px;
  text-align: center;
  margin-bottom: 20px;
  /* A soft shadow to lift the text off the background */
  text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
}

/* ===== NEW: Simplified Layout Container ===== */
#content-container {
  display: flex;
  gap: 15px; /* A little more space between columns */
  background-color: transparent; /* No more outer box! */
  border: none;
  padding: 0;
}

/* ===== Universal Column Styling ===== */
#left-sidebar, #main-content, #right-sidebar {
  background-color: rgba(255, 255, 255, 0.95);
  /* A single, delicate border for all boxes */
  border: 1px dotted #cce0ff;
  padding: 20px;
}

/* ===== Left Sidebar & Navigation Fix ===== */
#left-sidebar { width: 200px; flex-shrink: 0; }
.sidebar-box { margin-bottom: 20px; }
.navigation-links a {
  display: block; /* Makes each link its own line */
  text-align: center; /* Centers the text */
  margin-bottom: 8px; /* Adds space between links */
  text-decoration: none;
}
.update-entry { font-size: 12px; line-height: 1.5; }

/* ===== Main Content ===== */
#main-content { width: 100%; }
p { line-height: 1.8; }
.float-left { float: left; margin: 0px 15px 5px 0; width: 100px; }
.highlight { color: #41b6e6; font-weight: bold; }

/* ===== Right Sidebar & Scrollbox ===== */
#right-sidebar { width: 200px; flex-shrink: 0; }
.custom-scrollbox {
  background-color: transparent;
  border: 1px solid #cce0ff;
  margin-bottom: 15px;
}
.custom-scrollbox h2 {
  font-size: 10px;
  padding: 6px;
  border-bottom: 1px dotted #cce0ff;
}
.scrollbox-content {
  height: 150px;
  overflow-y: auto;
  padding: 10px; text-align: center;
}
.scrollbox-content img { margin-bottom: 8px; }

/* ===== Webring Widget ===== */
.webring-widget {
  background-color: transparent;
  border: 1px dotted #cce0ff;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

/* ===== Universal Headers ===== */
h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  color: #a1b0c0; /* Lighter header color */
  text-align: center;
  letter-spacing: 1px;
  border-bottom: 1px dotted #cce0ff;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

/* ===== Custom Scrollbar (for inner box) ===== */
.scrollbox-content::-webkit-scrollbar { width: 12px; }
.scrollbox-content::-webkit-scrollbar-track { background-color: transparent; }
.scrollbox-content::-webkit-scrollbar-thumb { background-color: #d6e7ff; border-radius: 20px; border: 3px solid #fff; }
.scrollbox-content::-webkit-scrollbar-thumb:hover { background-color: #a7c8f3; }
/* ===== NEW: Page Styles for About, Bookshelf, Links ===== */

.content-page-wrapper {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px dotted #cce0ff;
  padding: 25px;
}

.page-title {
  font-family: 'Grandstander', cursive;
  font-size: 36px;
  text-align: center;
  color: #a7c8f3;
  margin-bottom: 20px;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
}

.back-link {
  display: block;
  text-align: center;
  margin-top: 30px;
  text-decoration: none;
}

/* ===== Bookshelf Styling (for bookshelf.html) ===== */
.book-entry {
  background-color: #f0f8ff;
  border: 1px dashed #d6e7ff;
  padding: 15px;
  margin-bottom: 15px;
}
.book-entry h3 {
  font-family: 'Balsamiq Sans', cursive;
  color: #7d99c0;
  margin: 0 0 5px 0;
}
.book-entry .author {
  font-size: 12px;
  margin: 0 0 10px 0;
  font-style: italic;
}
.book-entry .review {
  font-family: 'Gaegu', cursive;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ===== Links Page Styling (for links.html) ===== */
.link-back-box, .neighbors-box {
  text-align: center;
  margin-bottom: 25px;
}
.link-back-box textarea {
  width: 80%;
  height: 50px;
  margin-top: 10px;
  font-size: 12px;
  padding: 5px;
  border: 1px dashed #d6e7ff;
}
.button-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* ===== NEW: Random Webrings Scrollbox ===== */
.random-webrings-box {
  background-color: transparent;
  border: 1px dotted #cce0ff;
  padding: 10px;
  margin-top: 15px; /* Adds space above this box */
  text-align: center;
}

.random-webrings-content {
  height: 120px; /* A small, fixed height */
  overflow-y: auto; /* Adds a scrollbar when needed */
  padding-top: 10px;
}

.random-webrings-content img {
  margin-bottom: 8px; /* Space between buttons */
}

/* Custom scrollbar for this new box */
.random-webrings-content::-webkit-scrollbar {
  width: 12px;
}
.random-webrings-content::-webkit-scrollbar-track {
  background-color: transparent;
}
.random-webrings-content::-webkit-scrollbar-thumb {
  background-color: #d6e7ff;
  border-radius: 20px;
  border: 3px solid #fff;
}
.random-webrings-content::-webkit-scrollbar-thumb:hover {
  background-color: #a7c8f3;
}