* {
    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: darkslategrey;
    --bg: #f2f2f2;
    --accent1: #afcaa1;
    --accent2: #a0d0a0;
    --border: #2f4f4f;
}
.sidebarleft,
.sidebarright, .entries-navigation{
  position: sticky;
  top: 140px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow: visible;
}

.sidebarleft {
  max-width: 180px;
  min-width: 180px; 
}

.sidebar-image {
    width: 100%; /* make the image span the full width of the sidebar */
    object-fit: cover;    /* crops and scales the image to fill the box */
    display: block; /* removes inline spacing issues */
    margin-bottom: 15px;  /* optional spacing below image */
    border-radius: 4px;   /* optional rounded corners */
}

.middle {
  max-width: 1500px;
  flex-grow: 1; /* this allows only the middle section to grow when the window is increased in size*/
  min-height: 180vh;
  
}
.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: 10px; /* gap between columns */
    max-width: 800px;
  justify-content: center;
}

.micro-container .box {
    flex: 0 0 calc(33.333% - 13.33px); /* this joint stytling allows for 3 boxes per row maximum, minusing the gap between them, 0 0 means that they won't grow or shrink to fit the column if theres only two on there for example, but will always stay 1/3rd of the middle container*/
    min-width: 120px; 
 /* prevents boxes from shrinking too much */
}

.micro-container .box-content img {
    width: 100%;
    height: auto;    /* keep aspect ratio */
    object-fit: cover; /* crops slightly if needed */
    display: block;
} /* stops the images in the boxes from being ginormous (only needed in the neocities css not codepen)*/

.micro-container a { /* styling for boxes within the microcontainer that also have a link*/
  display: block; /* make <a> block so width works */
  flex: 1 1 calc(33.333% - 13.33px); /* same as box */
  min-width: 140px;
  color: inherit;
  text-decoration: none;
}

.box-header + .box-content .micro-container {
  margin-top: 10px;
}

/* BODY & WRAPPER */
body {
    font-family: monospace;
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), 
                url('https://files.catbox.moe/otduzw.jpg');
    color: var(--text);
    line-height: 1.5;
    font-size: 18px;
    padding-top: 50px;
  display: flex;
  flex-direction: column;
  min-height:100vh;
} /* site styling */

.wrapper {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;
    align: center;
} /* whole middle content styling */

/* 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://files.catbox.moe/otduzw.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);
} /* isabels corner header background design*/

.tagline { 
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: lowercase;
    background-color: darkslategrey;
    color: #f2f2f2;
    padding: 10px;
    margin-left: 500px;
} /* isabel's corner header design */

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

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

.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 stuff for the navigation bar*/

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;
} /* stops isabelz corner thing from having a button */

/* 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: #FCF8E8;
    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);
}

.box-header {
    background: #afcaa1;
    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: 15px;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

.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;
} /* styling for paragraphs inside boxes */

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

.box-content img {
  width: 100%;
  height: 100%;
    object-fit: contain; /* fills the box, crops if needed */
  display: block;
} /*styling for an image within a box*/

.box-content:has(img) {
  padding: 0;
} /* when there is an img inside the box, there will be no padding instead of hte normal 15px, has(img) means that ONLY if image is in the box there will be no padding between image and border */

.box-content:has(.micro-container) {
  padding: 0;
} /* when there is an img inside the box, there will be no padding instead of hte normal 15px*/

.box-content > a {
  display: block; /* make it a block so margin works */
  text-align: center; /* centers the text */
  margin-top: 0px;
  margin-bottom: 15px;
  color: var(--text); 
}

.box-content .about-image { /* styling for if an image is inside a box with tag about image, you can keep using tyhis if you want to just chuck an image on the right side of a box */
    float: right;          /* floats the image to the right */
    width: 180px;          /* adjust the size as needed */
    height: auto;          /* keeps aspect ratio */
    margin-top: 15px;
    margin-left: 15px;     /* spacing between text and image */
    margin-right: 15px;
    margin-bottom: 10px;  
  border: 2px solid var(--border);
}

/* MUSIC PLAYER */

#music-player {
  display: flex;
  flex-direction: column;
  align-items: center;     /* center everything inside */
  text-align: center;
}


#music-player img {
  width: 120px;
  height: auto;
  display: block;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  margin-top: 15px;
  outline: 4px solid var(--border);
}

#slider-song { /* changes appearance of the slider */
  margin-top: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;/* webkit appearance and moz stops the default browser appearance of the slider*/
  border-radius: 12px;
  height: 8px;
  background: var(--accent1);
  outline: 2px solid var(--border);
}

#slider-song::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;/* webkit appearance and moz stops the default browser appearance of the slider*/
  background: var(--border);
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  z-index: 2;   /* ensures thumb sits above slider */
}


#music-buttons {
  display: flex;
  margin-top: 0px;
  justify-content: center;  
  flex-direction: row;
  font-size: 12px;   /* button sizes */
  margin-bottom: 0px;
}

#music-buttons i {
  display: flex;
  justify-content: center;  
  flex-direction: row;
  font-size: 20px;   /* button sizes */
  padding: 20px; /* gap between buttons*/
}

#song-name {
  margin-top: 5px;
  font-size: 14px;   /* smaller than default */
  font-weight: bold; /* optional: make title stand out */
}

#song-artist {
  font-size: 12px;   /* a bit smaller than the title */
  margin-bottom: 4px;
}

/* BTD BOX stuff */

.BTD-box {
    display: box;
    background: #668064;
    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: left;
  margin-right: 20px;
  color: var(--text);
}

/* SCROLL STYLING */

.scroll-content { /* this gives the 'recent updates' box the ability to scroll, the height changes the height of the whole box */
    max-height: 400px;
    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 that contain lists */
}

.box-list li:last-child {
    border-bottom: none;
} /* styling of last list div within a list */

.box-list li:before { /* before items in a list 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);
    }
}

a:hover {
    text-decoration: underline;
} /*when you hover over a link it underlines*/

/* 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;
}
.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/HIGHLIGHT STYLING */
::selection {
    background: var(--accent2);
    color: white;
}

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

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

@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: 850px) {
  .footer-links {
    flex-direction: column;
  }
}

@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;
    }
}