* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

:root {
    --text: #afcaa1;
    --bg: #f2f2f2;
    --accent1: #255E32;
    --accent2: #0F4D28;
    --border: #111716;
}
.sidebarleft,
.sidebarright {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow: visible;
}
.sidebarleft {
  max-width: 180px;
  min-width: 180px;
  
}
.middle {
  max-width: 700px;
  flex-grow: 1; /* this allows only the middle section to grow when the window is increased in size*/
  min-height: 100vh;
}
.sidebarright {
  max-width: 180px;
  min-width: 180px;

 
}
.container { 
  /* this .container contains the sidebars, and the middle, the flex allows them to sit beside each other, justify content space between allows them to still keep a gap between each other, and align items centre juist keeps them in the centre of the page */
  display: flex; 
  column-gap: 20px;
  justify-content: space-between;
  margin-bottom: 50px;
  /* distributes elements from left to right, should align boxes directly to the left/right of the screen but we have a max width (see .wrapper above) */
  align-items: flex-start;
 }

.micro-container {
  /* this .micro-container contains the character profiles, the flex allows them to sit beside each other */
    display: flex; 
    flex-wrap: wrap; /* allows items to go to next row */
    row-gap: 10px;    /* gap between rows */
    column-gap: 20px; /* gap between columns */
    margin-bottom: 30px;
    max-width: 800px;
}

.micro-container .box {
    flex: 1 1 calc(33.333% - 13.33px); /* this joint stytling allows for 3 boxes per row maximum, minusing the gap between them */
    min-width: 200px;  /* prevents boxes from shrinking too much */
}
.micro-container a { /*without this microcontainer + a thing, the character box will look like the 'a' style, which is black and shi*/
  display: block; /* make <a> block so width works */
  flex: 1 1 calc(33.333% - 13.33px); /* same as box */
  min-width: 200px;
  color: inherit;
  text-decoration: none;
}


/* BODY & WRAPPER */
body {
    font-family: monospace;
    background: linear-gradient(rgba(19, 60, 29, 0.9), rgba(0, 0, 0, 0.9)), 
                url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    color: var(--text);
    line-height: 1.5;
    font-size: 18px;
    padding-top: 50px;
  display: flex;
  flex-direction: column;
  min-height:100vh;
    background-repeat: no-repeat, repeat;   
    background-size: cover, 200px 200px; 
}

.wrapper {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;
    align: center;
}

/* SCROLLBAR STYLING */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #f0f0f0;
}

*::-webkit-scrollbar-thumb {
    background: var(--accent2);
    border: 1px solid var(--border);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent1);
}

/* HEADER */
header {
    background-image: url('https://i.pinimg.com/280x280_RS/34/37/fc/3437fce3cc40fe0521e9c00301aa9e3d.jpg');
    height: 100px;
    border: 2px solid var(--border);
    padding: 20px 20px 10px 20px; /* first 2 are top then right   respectively*/
    margin: 20px;
    box-shadow: 6px 6px 0 var(--border);
 
}

.tagline {
    font-size: 20px;
    letter-spacing: 1px;
    background-color: var(--border);
    color: #f2f2f2;
    padding: 10px;
    margin-left: 300px;
}

/* NAVIGATION */
nav {  
  width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--accent1);
    border-bottom: 2px solid var(--border);
    font-size: 13px;
}

.nav-container {
  margin: 0 15px; /* 15px left and right spacing */ 
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
    flex-wrap: wrap;
  
}

.site-name {
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  margin: left; 10px;
}

.site-name a {
    color: var(--text);
    text-decoration: none;
    padding: 14px 0;
    display: block;
}

.site-name a:hover {
    text-decoration: underline;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

nav > .nav-container > ul {
    margin-left: auto;
}

nav li {
    position: relative;
}

nav > .nav-container > ul > li > a {
    display: block;
    padding: 14px 12px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

nav > .nav-container > ul > li:first-child > a {
    border-left: none;
}

nav a {
    text-decoration: none;
    color: var(--text);
}

nav a:hover {
    text-decoration: underline;
}

/* Dropdown menu */
nav ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 2px solid var(--border);
    min-width: 200px;
    padding: 0;
    margin: 0;
    display: none;
}

nav ul li:hover > ul,
nav ul li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    display: block;
}

nav ul ul li {
    float: none;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}

nav ul ul li:last-child {
    border-bottom: none;
}

nav ul ul a {
    padding: 12px 16px !important;
    border: none !important;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    display: block;
}

/* Hamburger menu */
.menu-icon {
    cursor: pointer;
    display: none;
    padding: 0;
    user-select: none;
}

.menu-icon .navicon {
    display: block;
    height: 2px;
    position: relative;
    width: 18px;
    color: var(--text);
}

.menu-icon .navicon:before {
    content: '☰';
    font-size: 20px;
    display: block;
    position: absolute;
    top: -12px;
    right: -5px;
}

.menu-btn {
    display: none;
}

/* MAIN CONTENT */
main {
    padding: 0 20px 0 20px;
}
/* ABOVE is also important!!! gives magin for top, right, bottom (?), and left respectively*/
.page-title {
    background: var(--text);
    color: var(--bg);
    padding: 15px 20px;
    border: 2px solid #f2f2f2;
    box-shadow: 6px 6px 0 var(--border);
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* BOXES */
.box {
  max-height: 3000px;
    background: var(--accent1);
    border: 2px solid var(--border);
  /* -- border being  --border: #2f4f4f;  (so just the shadow and border colour */
    padding: 0; /* 0 meaning there is no gap between the border and the pale white outline*/
    margin-bottom: 20px; /* vertial gap between boxes */

}

.box-header {
    background: var(--accent2);
    padding: 10px 15px;
    border-bottom: 2px solid var(--border); /* gives the bottom of hte top of the box (green thing) it's own slate coloured border w/o making sides or top outlined*/
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;

}

.btd-header {
    background: #0F4D28;
    padding: 10px 15px;
    border: 2px solid var(--border); /* gives the bottom of hte top of the box (green thing) it's own slate coloured border w/o making sides or top outlined*/
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding-left: 20px;
}
.box-content {
    padding: 15px; /* gap between text and the outside of the box*/
}

.box-content p {
    margin-bottom: 12px; /* size of line breaks in boxes i think*/
    font-size: 14px;
}

.box-content p:last-child {
    margin-bottom: 0; 
  /* this gives the bottom of the text box no margin*/
}



#music-player img {
  width: 120px;
  height: auto;
  display: block;
}

#music-player {
  width: 120px;
  height: auto;
  display: block;
}

.character-link .box-content p {
  transform: scale(1);   /* normal state before hover, this allows for it to ease out and scale back to normal when mouse moves away*/
  transition: transform 0.25s ease-out;
}

.character-link:hover .box-content {
  background-color: rgba(0, 0, 0, 0.1); 
 /* changes colour of whole box darker a little when hovered*/
}

.character-link:hover .box-content p {
  transform: scale(1.05);  /* makes the <p> inside the box scale up 5% when hovered */
}

.BTD-box {
    display: box;
    background:  #afcaa1;
    border: 2px solid var(--border);
  /* -- border being  --border: #2f4f4f;  (so just the shadow and border colour */
    padding: 0; /* 0 meaning there is no gap between the border and the pale white outline*/
    margin-bottom: 20px; /* vertial gap between boxes */
    box-shadow: 6px 6px 0 var(--border);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s; /* smooth press animation */
}
/* Press effect */
.BTD-box:active {
  transform: translate(6px, 6px);       /* moves the box down and right */
  box-shadow: 0 0 0 var(--border);      /* remove shadow while pressed */
}

.BTD-box-content {
    padding: 15px; /* gap between text and the outside of the box*/
  text-align: center;
  margin-right: 20px;
  color: var(--accent2);
  font-size: 14px;
  transform: uppercase;
}


.scroll-content { /* this gives the 'recent updates' box the ability to scroll, the height changes the height of the whole box */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll-content::-webkit-scrollbar {
    width: 8px; /* width of scrollbar*/
}

.scroll-content::-webkit-scrollbar-track {
    background: #f0f0f0; /* colour of the back of the scrollbar (found in the recent updates box)*/
}

.scroll-content::-webkit-scrollbar-thumb {
    background: var(--accent2); /* colour of scrollbar*/
    border: 1px solid var(--border); /* colour of scrollbar border*/
}

.scroll-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent1);
}

.box-list {
    list-style: none;
    padding: 0; /* padding in the quick links box between box itself and content*/
}

.box-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
  /* style of the boxes in quicklinks */
}

.box-list li:last-child {
    border-bottom: none;
}

.box-list li:before { /* before items in the 'quick links' box is a green arrow that is 5px away from border that's bold */
    content: "→ ";
    color: var(--accent2);
    font-weight: bold;
    margin-right: 5px;
}

.date {
    color: var(--accent2);
    font-weight: bold;
    margin-right: 8px; /* 'recent updates' box -> gap between the green date and the info involving the update*/
}

/* STATUS BOX */
.status-box {
    background: var(--accent1);
    padding: 10px 15px;
    border: 2px solid var(--border);
    font-size: 12px;
    margin-bottom: 20px;
    box-shadow: 8px 8px 0 var(--border);
    animation: pulse 3s ease-in-out infinite;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  text-align: center;       /* center text */
}
.clap-wrapper {
  margin-top: 10px; /* <-- adds the gap */
}

@keyframes pulse { /* okay i didn't realise this but the box shadows pulse up and down 4px every 3 seconds accoding to the animation thing above */
    0%, 100% {
        box-shadow: 4px 4px 0 var(--border);
    }
    50% {
        box-shadow: 6px 6px 0 var(--border);
    }
}

/* INTRO BOX */
.intro-box {
    background: white;
    border: 2px solid var(--border);
    padding: 15px;
    box-shadow: 6px 6px 0 var(--border);
    margin-bottom: 20px;
}

.intro-box p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.intro-box p:last-child {
    margin-bottom: 0;
}


#cdr {
    color: darkslategray;
}

/* LINKS */
a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent2);
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration: underline;
}

/* FULL WIDTH */
.full-width {
    grid-column: 1 / -1;
}

/* BLOCKQUOTE */
blockquote {
    border-left: 3px solid var(--accent2);
    padding-left: 15px;
    margin: 15px 0;
    font-style: italic;
    background: #fafafa;
    padding: 12px 15px;
}

/* FOOTER */
.footer {
  position: relative;
   font-size: 13px;
   border-top: 2px;
   background: var(--accent1);
  border-top: 2px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  flex-wrap: wrap;
}
.footer-nav {
  width: 100%;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  position: relative;
}

.footer-links li ul {
  display: none; /* hide submenus in footer */
}

.footer-links a {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* SELECTION */
::selection {
    background: var(--accent2);
    color: white;
}

/* HR */
hr {
    border: none;
    border-top: 2px solid var(--border);
    margin: 20px 0;
}

/* BADGE GRID */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.badge {
    background: var(--accent1);
    border: 2px solid var(--border);
    padding: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 3px 3px 0 var(--border);
}

/* BUTTON GRID */
.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.button-grid img {
    max-height: 31px;
    image-rendering: pixelated;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.button-grid img:hover {
    box-shadow: 0 0 10px var(--accent2);
    transform: scale(1.1);
}

/* GUESTBOOK */
.guestbook-container {
    background: white;
    border: 2px solid var(--border);
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 6px 6px 0 var(--border);
}

.guestbook-header {
    background: var(--accent2);
    padding: 15px 20px;
    border-bottom: 2px solid var(--border);
    font-size: 16px;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.guestbook-frame {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
}

/* INFO BOX */
.info-box {
    background: var(--accent1);
    border: 2px solid var(--border);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--border);
    text-align: center;
}

.info-box strong {
    font-size: 16px;
}

/* SITEMAP */
.sitemap-box {
    background: white;
    border: 2px solid var(--border);
    padding: 0;
    box-shadow: 6px 6px 0 var(--border);
    margin-bottom: 20px;
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list li {
    padding: 12px 20px;
    border-bottom: 1px solid var(--accent1);
    font-size: 14px;
}

.sitemap-list li:last-child {
    border-bottom: none;
}

.sitemap-list li:before {
    content: "→ ";
    color: var(--accent2);
    font-weight: bold;
    margin-right: 8px;
}

.sitemap-list a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent2);
    text-decoration-thickness: 2px;
}

.sitemap-list a:hover {
    text-decoration: underline;
}

.sitemap-list s {
    opacity: 0.5;
}

.indent {
    margin-left: 30px;
    font-size: 13px;
}

.indent:before {
    content: "↳ ";
}


.tag {
    background: var(--accent2);
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header {
    background: var(--accent2);
    padding: 12px 20px;
    border-bottom: 2px solid var(--border);
    font-size: 16px;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

.section-content {
    padding: 20px;
}

.writing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.writing-item {
    background: #fafafa;
    border: 2px solid var(--border);
    padding: 15px;
    transition: all 0.2s;
}

.writing-item:hover {
    background: var(--accent1);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--border);
}

.writing-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: lowercase;
}

.writing-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.writing-description {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.writing-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent2);
    text-decoration-thickness: 2px;
}

.writing-link:hover {
    text-decoration: underline;
}

.list-view {
    list-style: none;
    padding: 0;
}

.list-view li {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.list-view li:last-child {
    border-bottom: none;
}

.list-view .writing-title {
    margin-bottom: 5px;
}

/* MICROBLOG PAGE */
.filter-bar {
    background: white;
    border: 2px solid var(--border);
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 var(--border);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-label {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.filter-tag {
    display: inline-block;
    background: var(--accent1);
    border: 2px solid var(--border);
    padding: 5px 12px;
    font-size: 12px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tag:hover, .filter-tag.active {
    background: var(--accent2);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 var(--border);
}

.post {
    background: white;
    border: 2px solid var(--border);
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 6px 6px 0 var(--border);
}

.post-header {
    background: var(--accent2);
    padding: 12px 20px;
    border-bottom: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-date {
    font-size: 14px;
    font-weight: bold;
}

.post-time {
    font-size: 12px;
    opacity: 0.8;
}

.post-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.post-tag {
    background: white;
    border: 1px solid var(--border);
    padding: 3px 8px;
    font-size: 11px;
    text-transform: lowercase;
}

.post-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.post-content p {
    margin-bottom: 12px;
}

.post-content p:last-child {
    margin-bottom: 0;
}

.post-content a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent2);
    font-weight: bold;
}

.post-content a:hover {
    background: var(--accent1);
}

.post-content blockquote {
    border-left: 3px solid var(--accent2);
    padding-left: 15px;
    margin: 15px 0;
    font-style: italic;
}

.post-image {
    margin-top: 15px;
    border: 2px solid var(--border);
}

.post-image img {
    width: 100%;
    display: block;
}

.post-footer {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    display: flex;
    gap: 15px;
}

.post-footer a {
    color: var(--text);
    text-decoration: none;
}

.post-footer a:hover {
    text-decoration: underline;
}

.mood-indicator {
    display: inline-block;
    font-size: 18px;
    margin-right: 8px;
}

.month-divider {
    background: var(--text);
    color: var(--bg);
    padding: 10px 20px;
    border: 2px solid var(--border);
    box-shadow: 4px 4px 0 var(--border);
    margin: 30px 0 20px 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination a {
    background: white;
    border: 2px solid var(--border);
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text);
    font-weight: bold;
    box-shadow: 3px 3px 0 var(--border);
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--accent1);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--border);
}

.pagination a.active {
    background: var(--accent2);
}

/* ART PAGE */
.year-header {
    background: var(--text);
    color: var(--bg);
    padding: 12px 20px;
    border: 2px solid #f2f2f2;
    box-shadow: 6px 6px 0 var(--border);
    margin: 30px 0 20px 0;
    font-size: 18px;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.year-header:first-of-type {
    margin-top: 0;
}

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.art-item {
    background: white;
    border: 2px solid var(--border);
    box-shadow: 4px 4px 0 var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.art-item:hover {
    transform: translateY(-4px);
    box-shadow: 6px 6px 0 var(--border);
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* WALL - MASONRY GRID */
.grid-uneven {
    column-count: 3;
    column-gap: 20px;
}

.grid-uneven-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
}

.grid-uneven-item a {
    display: block;
    text-decoration: none;
}

.grid-uneven-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid var(--border);
    box-shadow: 6px 6px 0 var(--border);
    transition: transform 0.2s;
}

.grid-uneven-item a:hover img {
    transform: scale(1.02);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox:target {
    display: flex;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid var(--border);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.lightbox-text {
    color: white;
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    padding: 0 20px;
}

.lightbox::after {
    content: "✕";
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    font-weight: 200;
}

/* Lightbox for art gallery */
.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    background: white;
    border: 3px solid var(--border);
    box-shadow: 8px 8px 0 var(--border);
}

.lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--accent2);
    color: var(--text);
    border: 2px solid var(--border);
    padding: 8px 16px;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--border);
}

.lightbox-close:hover {
    background: var(--accent1);
}

.lightbox-info {
    background: var(--accent2);
    padding: 10px 15px;
    border-top: 2px solid var(--border);
    font-size: 13px;
}

.lightbox-title {
    font-weight: bold;
    margin-bottom: 4px;
}

/* ====================================
   RESPONSIVE DESIGN - MOBILE
   ==================================== */

@media (max-width: 650px) {
    .micro-container {
        grid-template-columns: 1fr; /* single column on small screens only :D */
    }
}

@media (max-width: 850px) {
    body {
        padding-top: 50px;
    }

    .nav-container {
        flex-wrap: wrap;
        padding: 8px 20px 6px 0px;
    }

    .menu-icon {
        display: flex;
        order: 2;
    }

    .site-name {
        order: 1;
    }

    nav > .nav-container > ul {
        clear: both;
        flex-basis: 100%;
        max-width: 100%;
        max-height: 0;
        overflow: hidden;
        margin-left: 0;
        flex-direction: column;
    }

    .menu-btn:checked ~ ul {
        max-height: 1000px;
        padding: 10px 0;
    }

    nav > .nav-container > ul > li {
        width: 100%;
    }

    nav > .nav-container > ul > li > a {
        padding: 8px 0;
    }

    /* Mobile: flatten nested lists */
    nav ul ul {
        position: static;
        visibility: visible;
        opacity: 1;
        display: block;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 20px;
        margin: 0;
    }

    nav ul ul li {
        border: none;
    }

    nav ul ul a {
        padding: 6px 0 !important;
        font-size: 12px;
    }

    .menu-btn:checked ~ .menu-icon .navicon:before {
        content: '✕';
    }
    
    .guestbook-frame {
        height: 500px;
    }
    
    .grid-uneven {
        column-count: 2;
    }
}


@media (max-width: 768px) {
    .grid-uneven {
        column-count: 2;
    }
}

@media (max-width: 650px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .shrine-grid {
        grid-template-columns: 1fr;
    }
    
    .character-grid {
        grid-template-columns: 1fr;
    }
    
    .media-grid {
        grid-template-columns: 1fr;
    }
    
    .writing-grid {
        grid-template-columns: 1fr;
    }

    header, main, footer {
        margin-left: 5px;
        margin-right: 10px;
    }
    
    header, nav, main, footer {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .post-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-bar {
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    .grid-uneven {
        column-count: 1;
    }
}
#cdr {
  width: 200px;
  margin: 0 auto;
  padding: 6px;
}

#cdr table {
  background-color: #ffffff;
  margin: 0 auto;
}

#cdr table tr td {
  padding: 1px; 
}

#cdr .webring-prev {
  text-align: right;
}

#cdr .webring-info {
  text-align: center;
}

#cdr .webring-next {
  text-align: left;
}

#cdr .webring-links {
  font-size: small;
}


#cdr p {
  margin: 0.3em 0; 
}

.cdr-badge {
  display: block;
  margin: 0.2em auto; 
  max-width: 200px;
  height: auto;
}

.cdr-widget {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  margin: 0; 
  line-height: 1.2; 
}

.cdr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin: 0.2em 0; 
}

.cdr-nav .cdr-prev,
.cdr-nav .cdr-next {
  font-weight: bold;
  text-decoration: none;
}