:root {
                --header-image: url('https://files.catbox.moe/4izxdc.jpeg'); 
                --body-bg-image: url('https://files.catbox.moe/sw9swz.jpeg');

                /* colors */
                --content: #fff;
            }
 span {
   
   color: white;
   text-shadow: -1px -1px 0 hsl(32 100% 66.6%), 1px -1px 0 hsl(32 100% 66.6%), -1px 1px 0 hsl(32 100% 66.6%), 1px 1px 0 hsl(32 100% 66.6%);
  
 }
            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
    */

             .wrappy {
  
   background: url('https://files.catbox.moe/0n1dsc.jpeg');
   background-size: 50% auto; 
    background-repeat: repeat;
    background-position: center;
      inline-size: calc-size(stretch, min(90rem, size - 3em)); 
    margin-inline: auto;
  outline-inset: -10px;
  
    border: 2px solid hsl(323 86.7% 78.1%); /*border border border*/

  border-radius: 2rem;
  overflow: clip;
  width: 100%;      /* Takes up 90% of the screen width */
  margin-top: 50px;
  margin-bottom: 50px;
  margin: 0; /* REMOVED margins here to kill the top space */
  
  inline-size: 100%;
  outline-offset: -10px;
  border-radius: 2rem;
  overflow: clip;
  box-sizing: border-box; /* Important for padding */
  
  display: flex;
    align-items: flex-start;
}
       
       
       .inner-shell {
         
  width: 80%; /* Main container width */
  border: 3px solid hsl(323 86.7% 69.8%); /* Outer border color */
  border-radius: 2.2rem; /* Slightly larger than inner */
  padding: 10px; /* Space between outer and inner */
  
  width: 100%;
  margin: 0;
  border-radius: 2.5rem;
  background: hsl(336 100% 92.3%); /* Dark contrast background */
  

   padding: 10px; 
  margin: 0;

}

   .outer-shell {
       margin: 50px auto 0px;
  width: 80%; /* Slightly wider to contain everything */
  border: 3px solid hsl(180 57.6% 58.1%); /* Matches the wrappy pink */
  border-radius: 3rem;
    padding: 12px;
  background: hsl(180 87.9% 87.9%); /* Deepest background color */
  
  
}


   .outer-shell, .inner-shell, .wrappy {
  box-sizing: border-box;
  display: block; /* Ensures they behave as full-width blocks */
}

     .outermost-shell 
  box-sizing: border-box;
    margin: 50px auto;
  width: 90%; /* Slightly larger than the containers inside */
  padding: 20px; /* Space between image edge and the pink border */
  background: url('https://files.catbox.moe/c51nk1.png') center/cover no-repeat;
  border-radius: 4rem;
  border: 2px solid rgba(255,255,255,0.2); /* Subtle edge to the image */
}



            * {
                box-sizing: border-box;
            }
            
           #header {
             

    /* 3. Override ONLY the bottom border to be black */
    border-bottom: 2px solid hsl(323 86.7% 69.8%);
    
           }



      marquee {
        
        display: block;
    background: url('https://files.catbox.moe/5xawc3.jpeg'); /* Or your header color */
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    /* Ensure the marquee is exactly as tall as the GIFs */

    
      }

     marquee img {
    /* 1. Removes the white space under images */
    display: inline-block; 
    vertical-align: top;
    
    /* 2. Sets top/bottom touching (0), adds gap between (right) */
    margin: 0 10px 0 0; 
    
    /* 3. Forces height to fit container */
    height: 100%; 
  }
  
        body {
          
            font-family: Helvetica, Arial, Noto-Sans-JP, sans-serif;
  text-transform: lowercase;
  color: #000; /* default text color */
  background: url('https://files.catbox.moe/h6gc96.jpeg');
  background-size: 50% auto; /*bro its the BACKGROUND*/
    background-repeat: repeat;
    background-position: center;
    
}

        
            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #000;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #fff;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
                
                display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: bold;
    min-block-size: 15rem;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background: url('https://files.catbox.moe/5xawc3.jpeg'); /*the first nav?*/
                margin: 0;
              padding: 0;
               width: 100%;
            }


            #navbar li {
                padding-top: 2px;
                display: block;
                list-style-type: none;
                display: flex;
    align-items: center; /* Vertically centers within 40px */
    
            }
            
             #navbar ul {
            
            list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Aligns li items horizontally */
    justify-content: center; /* Centers links */
    height: 100%;
    
          }
         
          

            /* navigation links*/
            #navbar li a {
                color: blue;
                text-align: center;
                width: 100%;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                border: 2px solid #333;
                
           border-radius: 4px;      
           display: inline-block;    /* Allows padding to work correctly */
       padding: 4px 15px;        /* Matches the "Updates" bubble feel */
       line-height: 1;           /* Makes the text fill the bubble height */
       text-decoration: none;    /* Removes the default underline */
       color: #000;              /* Match border color */
    
    /* 3. FONT STYLE */
    font-family: 'Noto-Sans-JP', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

                     
                     
                     
                     
                     
  #navbar li:nth-child(1) a {
    background: hsl(316 100% 91.8%);
    text-shadow: -1px -1px 0 hsl(316 100% 70.5%), 1px -1px 0 hsl(316 100% 70.5%), -1px 1px 0 hsl(316 100% 70.5%), 1px 1px 0 hsl(316 100% 70.5%);
          color: #fff;
          border: hsl(316 100% 70.5%);
          margin-top: 0;
      
}


#navbar li:nth-child(2) a {
         color: #fff;
          background: hsl(65 100% 91.8%);
          text-shadow: -1px -1px 0 hsl(32 100% 66.6%), 1px -1px 0 hsl(32 100% 66.6%), -1px 1px 0 hsl(32 100% 66.6%), 1px 1px 0 hsl(32 100% 66.6%);
          border: hsl(32 100% 66.6%);
        
}

#navbar li:nth-child(3) a {
  color: #fff;
    background: hsl(190 100% 91.8%);
    text-shadow: -1px -1px 0 hsl(215 100% 66.6%), 1px -1px 0 hsl(215 100% 66.6%), -1px 1px 0 hsl(215 100% 66.6%), 1px 1px 0 hsl(215 100% 66.6%);
    border: hsl(215 100% 66.6%);
}

#navbar li:nth-child(4) a {
  color: #fff;
    background: hsl(261 100% 91.8%);
    text-shadow: -1px -1px 0 hsl(276 100% 70.5%), 1px -1px 0 hsl(276 100% 70.5%), -1px 1px 0 hsl(276 100% 70.5%), 1px 1px 0 hsl(276 100% 70.5%);
    border: hsl(276 100% 70.5%);
    margin-bottom: 2px;
}

         
            #rightSidebar { /*text!important*/
              
              order: 3;
    color: #fff;
    text-shadow: -1px -1px 0 hsl(316 100% 70.5%), 1px -1px 0 hsl(316 100% 70.5%), -1px 1px 0 hsl(316 100% 70.5%), 1px 1px 0 hsl(316 100% 70.5%);
    background: url('https://files.catbox.moe/l7g9a5.jpeg');
    background-size: 150% auto; 
    background-repeat: no-repeat;
    background-position: center;
    
     max-height: 120px;
     
overflow-y: auto;
  overflow-x: hidden;
  
            }
            
          
        #leftSidebar h2 {
              
              
              color: #fff;
    background: hsl(190 100% 91.8%);
    text-shadow: -1px -1px 0 hsl(215 100% 66.6%), 1px -1px 0 hsl(215 100% 66.6%), -1px 1px 0 hsl(215 100% 66.6%), 1px 1px 0 hsl(215 100% 66.6%);
        border: hsl(215 100% 66.6%);
        display: inline-block;     /* Hugs the text width */
        width: 100%;

            overflow-y: auto;
  overflow-x: hidden;
  
         box-sizing: border-box; 
         
        /* 2. REMOVE THE GAPS */
        margin-top: 0;       /* Snaps it to the top of the sidebar */
    box-sizing: border-box; 
        margin-bottom: 0px;          /* Removes the space between this and the box below */
        
        /* 3. TIGHTEN THE BUBBLE */
        padding: 4px 15px;         /* Smaller values make the bubble wrap tighter */
        line-height: 1;            /* Reduces vertical space inside the text itself */
        
        /* 4. NEW FONT */
        font-family: 'Noto Sans JP', sans-serif; /* A cleaner, different look */
        font-size: 1rem;
        letter-spacing: 1px;
        text-align: center;
        
        display: block;
        
        border-radius: 7px 7px 0 0;

    border: 2px solid transparent;

    border-bottom: 2px solid hsl(323 86.7% 69.8%);
;

    /*     padding: 8px 15px; */
    box-sizing: border-box;
    width: 100%;
    

    

    }
    
    
          
            #rightSidebar h2 {
              
              
              color: #fff;
    background: hsl(190 100% 91.8%);
    text-shadow: -1px -1px 0 hsl(215 100% 66.6%), 1px -1px 0 hsl(215 100% 66.6%), -1px 1px 0 hsl(215 100% 66.6%), 1px 1px 0 hsl(215 100% 66.6%);
    border: hsl(215 100% 66.6%);
            /* 1. THE BORDER BOX */
        border: 2px solid #000;
        display: inline-block;     /* Hugs the text width */
        width: 100%;

position: sticky;
    top: 0;
    overflow-y: auto;
  overflow-x: hidden;

         box-sizing: border-box; 
         
        /* 2. REMOVE THE GAPS */
        margin-top: 0;       /* Snaps it to the top of the sidebar */
    box-sizing: border-box; 
        margin-bottom: 2px;          /* Removes the space between this and the box below */
        
        /* 3. TIGHTEN THE BUBBLE */
        padding: 4px 15px;         /* Smaller values make the bubble wrap tighter */
        line-height: 1;            /* Reduces vertical space inside the text itself */
        
        /* 4. NEW FONT */
        font-family: 'Noto Sans JP', sans-serif; /* A cleaner, different look */
        font-size: 1rem;
        letter-spacing: 1px;
        text-align: center;
        
        display: block;
        
        border-radius: 7px 7px 0 0;
        
        
    border: 2px solid transparent;
    border-bottom: 2px solid hsl(323 86.7% 69.8%);


    /*     padding: 8px 15px; */
    box-sizing: border-box;
    width: 100%;

  
    }

    /* Target the container right under it to ensure no top gap */
    #rightSidebar h2 + .box {
        margin-top: 0;
        padding-top: 0px; /* Tiny bit of breathing room for the list */
    }
    
 



            #flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #fff;
                width: 200px;
                padding: 0px;
                font-size: smaller;
                border: .2em solid hsl(316 100% 74.4%); /*border border border*/
  outline: 5px solid transparent; 
  outline-inset: -10px;
  border-radius: 10px;
  gap: 1;
  margin: 5px;
  
                  
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background: url('https://files.catbox.moe/ai05nh.jpeg'); 
    background-size: 120% auto; 
    background-repeat: repeat;
    background-position: center;
    margin: 3px;
    flex: 1;
    padding: 15px;
    order: 2;
    border: .2em solid hsl(316 100% 74.4%);
    outline-offset: -10px; /* Fixed property name and removed quotes */
    border-radius: 15px;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    
         max-height: 210px; /* Or use vh, e.g., 50vh */
  
  /* 2. Enable vertical scroll, hide horizontal */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Optional: Helps ensure content doesn't break horizontal scrolling */
  word-wrap: break-word;
  
  
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

             #leftSidebar {
                order: 1;
                  
    
            }
  
  #leftSidebar, #rightSidebar {
    align-self: flex-start; /* This stops them from stretching to match 'main' */
}
  
  #bottomleftsidebar {
    width: 195px; /* Matches your image width */
    padding: 10px;
    background: #f0f0f0; /* Optional: adds a background color */
    border: 1px solid #ccc; /* Optional: adds a border */
        display: flex;
    flex-direction: column; /* This forces a vertical stack */
    gap: 10px;
}


            

            
            
            .leftSidebar, .rightSidebar {
          align-self: flex-start;
                     }


            

            footer {
                background-color: #fff;
                background: url('https://files.catbox.moe/72jjhc.jpeg');
                background-size: 150% auto; 
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
                height: 100px;
                padding: 10px;
                text-align: center;
                padding: 0px;
                font-size: smaller;
                color: #fff;
                text-shadow: -1px -1px 0 hsl(316 100% 70.5%), 1px -1px 0 hsl(316 100% 70.5%), -1px 1px 0 hsl(316 100% 70.5%), 1px 1px 0 hsl(316 100% 70.5%);
                
                
                border: 2px solid transparent;
    border-top: 2px solid hsl(323 86.7% 69.8%);
    
    
            }

            h1,
            h2,
            h3 {
                color: #ffffff;
                /* text-shadow: -1px -1px 0 hsl(316 100% 70.5%), 1px -1px 0 hsl(316 100% 70.5%), -1px 1px 0 hsl(316 100% 70.5%), 1px 1px 0 hsl(316 100% 70.5%);*/
                font-family: Arial;
            }

            h1 {
                font-size: 15px
                margin: 2px;
                padding: 2px;
                text-shadow: -3px -3px 0 hsl(316 100% 70.5%), 3px -3px 0 hsl(316 100% 70.5%), -3px 3px 0 hsl(316 100% 70.5%), 3px 3px 0 hsl(316 100% 70.5%);
          color: #fff;
          text-decoration: italic;
          text-align: absolute;
            }

            strong {
                /* this styles bold text */
                color: black;
                text-decoration: italic;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #fff;
                  border: .2em solid hsl(316 100% 74.4%); /*border border border*/
  outline-inset: -10px;
  border-radius: 12px;
                padding: 10px;
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }


         @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }