}
            }
        </style>

    
        <div id="container">
            <div id="headerArea">
                <div id="header" style="width: 1000px; height: 220px; background-size: cover; 
    background-position: center;" ></div>
         
            <div id="flex">

  
   </div>
    
    
    
</aside>
                <main>


               <div class="my-box">
              
    
     <!-- Add an image inside the directory box -->
    <img src="https://files.catbox.moe/dvg0tz.png" alt="Directory Image" class="directory-image">
  
    <img src="https://files.catbox.moe/gn5abg.png" alt="button-1" class="button-1">
      <p style= "text-align: left; margin-top: -20px; margin-left: 50px;">Home</p> 
      
    <img src="https://files.catbox.moe/gn5abg.png" alt="button-2" class="button-2" >
      <p style= "text-align: left; margin-top: -20px; margin-left: 50px;">About me</p> 
      
    <img src="https://files.catbox.moe/gn5abg.png" alt="button-3" class="button-3">
      <p style= "text-align: left; margin-top: -20px; margin-left: 50px;">Collections</p> 
      
      <img src="https://files.catbox.moe/gn5abg.png" alt="button-3" class="button-3">
      <p style= "text-align: left; margin-top: -20px; margin-left: 50px;">Pixels</p>
      
      <img src="https://files.catbox.moe/gn5abg.png" alt="button-3" class="button-3">
      <p style= "text-align: left; margin-top: -20px; margin-left: 50px;">Neocities profile</p>
    
</div>
<div class="parent-box">
    <div class="child-box">
    
        <!-- Content inside the smaller box -->
        <p>Welcome to my site! <img src="https://files.catbox.moe/mrkjxh.gif"> I made this from sadgirls template with no prior experiance coding, so the code is probably pretty messy but idk. also if u are seeing this now its still in progress so dont judge lol </p> 
        
    <img src="https://files.catbox.moe/yjufds.png" alt="Button Image" class="child-image">
    
    <a href="https://goblin-heart.net/sadgrl/projects/layout-builder/" target="https://goblin-heart.net/sadgrl/projects/layout-builder/" style= color:#cbdff5;> <p>Sadgirls layout builder</p>
</a>
       
           <!-- Second box (newly added) -->
  <div class="button-box">
    <div class="codesigma">
        <img src="https://files.catbox.moe/psuh9f.png" alt="Small image" class="button-header">
        
        <a href="https://files.catbox.moe/trvujn.png" target="_blank">
            <img src="https://files.catbox.moe/5x9lxf.png" alt="Small image" class="button-image">
        </a>
        
        <a href="https://files.catbox.moe/1malyw.png" target="_blank">
            <img src="https://files.catbox.moe/1malyw.png" alt="Small image" class="button2-image">
        </a>
    </div>
</div>
  <img src="https://files.catbox.moe/ruxdxj.png" alt="music image" class="cake-image">

         <!-- Long, thin box with rotating images -->
        <!-- Rotating image box -->
            <div class="image-rotator-box">
            
                <div class="image-container">
                
                       <a href="https://eau-de-parfum.neocities.org/site" target="_blank">
            <img src="https://files.catbox.moe/9di413.png" alt="Image 1" class="rotating-image">
        </a>
        
        <a href="https://files.catbox.moe/7k0wti.png" target="_blank">
            <img src="https://files.catbox.moe/7k0wti.png" alt="Image 2" class="rotating-image">
        </a>
        
        <a href="https://lovesick.cafe/" target="_blank">
            <img src="https://files.catbox.moe/i19h62.png" alt="Image 3" class="rotating-image">
        </a>
        
         <a href="https://goooby.neocities.org/" target="_blank">
            <img src="https://files.catbox.moe/jieq5n.gif" alt="Image 4" class="rotating-image">
        </a>
     
        <a href="https://nyaa.neocities.org/" target="_blank">
            <img src="https://files.catbox.moe/4ecs0v.gif" alt="Image 5" class="rotating-image">
        </a>
        
        <a href="https://ginder.neocities.org/angelcity" target="_blank">
            <img src="https://files.catbox.moe/i4q24b.jpg" alt="Image 6" class="rotating-image">
        </a>
                    
        <a href="https://strawbunniesoda.neocities.org/" target="_blank">
            <img src="https://files.catbox.moe/5x9lxf.png" alt="Image 7" class="rotating-image">
        </a>          
           
    </div>
    
        
</div>

 <div class="poster-box"></div>
 <div class= "postergirl"></div>
 <div class= "postermelo"> </div>
   <img src="https://files.catbox.moe/c1hsxo.png" class="todo"> </div>
 <div class="scrold-box"></div>
  <div class="toscroll">
  <p class="outlined-text">To-do</p> <!-- Apply outline to To-do heading -->
  <ul>
    <li>fix site rotation</li> <!-- No outline for list items -->
    <li>fix directory and put stuff in it</li>
    <li>webrings</li>
    <li>add site changes thingy in tab box</li>
  </ul>
  
</div>

        <div class="binder">
  <div class="tabs">
    <button class="tab active"onclick="showTab(0)">Tab 1</button>
    <button class="tab" onclick="showTab(1)">Tab 2</button>
    <button class="tab" onclick="showTab(2)">Tab 3</button>
  </div>
	
  <div class="tab-content active" id="tab-content-0">
  
  
 <div style="background-color: #fbf7ff; padding: 10px; width:230px; height:330px;         margin-top:-10px; margin-left: -20px;border-radius:3px;border: 1px dotted #dbccf0;">
  <iframe src="https://www3.cbox.ws/box/?boxid=3544321&boxtag=ylt3bB" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" style="margin-top:-150px; margin-left: 0px;"></iframe>
</div>
  
<form method="post" action="https://poll.pollcode.com/51569773">
  <div style="margin-top:-330px; margin-left: 235px;border-radius:3px;border: 1px solid #f0cee2;width:190; height:120; background-image: url('https://files.catbox.moe/z7oha1.png');background-size:cover;bpadding:2px;width:149px;font-family:Times New Roman;font-size:medium;color:#de8eb2;">
    <div style="padding:6px 5px 8px 7px;">
      <strong>Dessert?</strong>
    </div>
    <div align="center" style="padding-bottom:10px;">
      <select name="answer"style="color: #de8eb2; background: #ffffff87; border: 1px solid #fd9de3;">
        <option value="1">Shortcake</option>
        <option value="2">Chocolate</option>
        <option value="3">Oreo</option>
        <option value="4">Cake roll</option>
        <option value="5">Cookie</option>
        <option value="6">Donut</option>
      </select>
          </div>
    </div>
    </form>
    <div align="center" style="padding:3px; margin-top:-70px; margin-left: 250px;">
     <input type="submit" value=" Vote " style="color: #ecaac8; background: #ffffff87; border: 1px solid #fd9de3; padding: 3px;border-radius: 4px;">
      <input type="submit" name="view" value=" View " style="color: #ecaac8; background: #ffffff87; border: 1px solid #fd9de3; padding: 2px;border-radius: 4px;">
    </div>
       
       
       
    <audio id="my-audio" src="https://files.catbox.moe/p9ezb9.mp3"></audio>

<img 
  src="https://files.catbox.moe/vel6es.png" 
  alt="music image" 
  class="music-image" 
  id="music-toggle"
  style="cursor: pointer;"
  >

  </div>
  </div>

  <div class="tab-content" id="tab-content-1">
    

   <div class="blinkie-box" style="
    position: absolute;
    top: -350px;
    left: 260px;
    width: 300px;
    height: 320px;
    background-color: #fffafd;
    border: 1px dotted #f7b0d2;
    z-index: 10;
    padding: 10px;
  ">
    <img src="https://files.catbox.moe/b7g7ak.gif" alt="blinkie1" style="width: 280px; display: block; margin-bottom: 10px;">
    <img src="https://files.catbox.moe/a9f3k7.gif" alt="blinkie2" style="width: 280px; display: block; margin-bottom: 10px;">
    <img src="https://files.catbox.moe/i7qnvw.webp" alt="blinkie2" style="width: 280px; display: block; margin-bottom: 10px;">
    <img src="htps://files.catbox.moe/w5aqto.gif" alt="blinkie2" style="width: 280px; display: block; margin-bottom: 10px;">
    <img src="https://files.catbox.moe/bvif3o.webp" alt="blinkie2" style="width: 280px; display: block; margin-bottom: 10px;">
    <img src="https://files.catbox.moe/nmabmo.webp" alt="blinkie3" style="width: 280px; display: block;">
  </div>
</div>


  <div class="tab-content" id="tab-content-2">
    <p>This is the content for Tab 3.</p>
    
    
    
  </div>
</div>
                </main>
                
         
            </ul></aside></div>
            <footer id="footer" class="footer-text" style="margin-top: 10px;"><b>strawbunniesoda.neocities.org | 2025 - FOREVER ^_^ !! <b></footer>
        </div>
        <!-- THIS IS THE CSS !-->
        
        
        
        <style>
            /* user styles */

            /* styles are what change the color and sizes of stuff on your site. */

            /* these are variables that are being used in the code
    these tended to confuse some people, so I only kept 
    the images as variables */

            :root {
                --header-image: url('https://files.catbox.moe/hqmktc.png');
                --body-bg-image: url('https://files.catbox.moe/n0w22r.jpg');

                /* colors */
                --content: #c8e6f7;
            }

            /* 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!
    
    */

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                background-color: #08031A;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 65px;
                color: #995c88;
                background-image: var(--body-bg-image);
            }

             {
                box-sizing: border-box;
            }

            /* 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 */
    


/* Main content area - apply flexbox layout */


* {
    box-sizing: border-box;
}

main {
    display: flex;              /* Enable flexbox */
    flex-direction: horizontal;        /* Ensure items are laid out in a row (side by side) */
    justify-content: flex-start; /* Align items to the left */
       flex-wrap: wrap;             /* Allow wrapping on small screens */
    gap: 20px;                  /* Add some space between the boxes */
}


.footer-text {
  font-size: 20px; /* Adjust font size as needed */
  color: #fff7fb; /* Text color */
  text-shadow: 
    1px 1px 0px #e68cb3,  /* Top-left shadow */
    -1px -1px 0px #e68cb3, /* Bottom-right shadow */
    1px -1px 0px #e68cb3,  /* Top-right shadow */
    -1px 1px 0px #e68cb3;  /* Bottom-left shadow */
}

.footer-text {
  font-size: 20px; /* Adjust font size as needed */
  color: #fff7fb; /* Text color */
  text-shadow: 
    1px 1px 0px #e68cb3,  /* Top-left shadow */
    -1px -1px 0px #e68cb3, /* Bottom-right shadow */
    1px -1px 0px #e68cb3,  /* Top-right shadow */
    -1px 1px 0px #e68cb3;  /* Bottom-left shadow */
}

/* Apply text outline and bold styles */
.outlined-text {
  font-size: 20px;
  font-weight: bold; /* Makes the text bold */
  color: #fff7fb; /* Text color */
     text-shadow: 
    1px 1px 0px #e68cb3,  /* Top-left shadow */
    -1px -1px 0px #e68cb3, /* Bottom-right shadow */
    1px -1px 0px #e68cb3,  /* Top-right shadow */
    -1px 1px 0px #e68cb3;  /* Bottom-left shadow */
}

   .poll-container {
      margin-top: 50px;
      text-align: center;
}
a {
    color: #cbdff5; /* Change text color globally */
    font-size: 16px; /* Change font size */
    text-decoration: none; /* Remove underline by default */
}

a:hover {
    color: #cbdff5; /* Change color when hovered */
    text-decoration: underline; /* Add underline on hover */
}

/* TAB BOX 1__________________________________________________________ */

.music-image {
  margin-top: 40px; 
  margin-left: 190px; 
    width: 220px; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
}

.binder {
  position: relative;
  z-index: 10; /* Higher than tabs to make it stay above the tabs */
  background-color: #f8f8f8; /* Ensure the box is visible */
  border: 1px solid #ffd9e5;
  padding: 20px;
  height: 390px;
  width: 450px;
  margin-top: 80px;
  margin-left: 230; /* Remove negative margin */
  border-radius: 10px;
  box-shadow: inset 0 0 15px #ffd9e5;
  background-image: url('https://files.catbox.moe/gfjffj.jpg'); /* URL of the tiled background image */
  background-repeat: repeat; /* Ensure the image tiles */
  background-size: 100px 100px; /* Resize the tiled images to 50x50 pixels */
}

.tabs {
  width: 469px;
  justify-content: flex-start;
  margin-left: -30px;
  position: relative;
  z-index: 5; /* Lower than the binder */
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-top: -20px;
    with: 100%; /* Ensure the tabs span the full width of the binder */
}

.tab { 
  padding: 0px;
  position: relative;
  box-shadow: inset 0 0 15px #ffd9e5;
  background-image: url('https://files.catbox.moe/gfjffj.jpg'); /* URL of the tiled background image */
  background-repeat: repeat; /* Ensure the image tiles */
  background-size: 100px 100px; /* Resize the tiled images to 50x50 pixels */
  width: 200px;
  height: 40px;
  background-color: #ffd9e5;
  border: 1px solid #ffd9e5;
  padding: 10px;
  cursor: pointer;
  margin-top: -40px;
}

.tab-content {
  position: relative;
  display: none;
  padding: 20px;
}

.tab.active {
  height: 50px;
  position: relative;
  z-index: 10; /* Higher than inactive tabs */
  border: 1px solid #ffe8f2;
  
  box-shadow: inset 0 5px 3px rgba(255, 217, 229, 0.5), /* Top glow - light pink */
              inset 5px 0 3px rgba(255, 217, 229, 0.5), /* Left glow - light lavender */
              inset -5px 0 3px rgba(255, 217, 229, 0.5), /* Right glow - light lavender */
              inset 0 -5px 15px rgba(255, 237, 245, 0.3); /* Bottom glow - softer pink */
  background-color: #f0f0f0; /* Keep background color */
  border-bottom: 0px solid #fff; /* Create a flat bottom edge */
}

/* Round only the left corners of Tab 1 */
.tab:nth-child(1) {
  border-radius: 10px 0 0 0px;
}

/* Round only the right corners of Tab 3 */
.tab:nth-child(3) {
  border-radius: 0 10px 0px 0;
}

.tab-content.active {
  position: relative;
  display: block;
}

/* TAB BOX __________________________________________________________ */


.todo{
  position: relative;
  width: 250px;
  height: 245px;
  margin-top: 60px;
  margin-left: -70px;
  
}

.toscroll{
  overflow: auto;
  position: absolute;
  width: 190px;
  height: 120px;
  margin-top: 60px;
  margin-left: -5px;
  order: 2;
  rgba(255, 0, 0, 0.3);
}

/* Style the scrollbar track (background) */
.toscroll::-webkit-scrollbar {
    width: 10px;  /* Width of vertical scrollbar */
    height: 10px; /* Height of horizontal scrollbar */
}

/* Style the track (background) */
.toscroll::-webkit-scrollbar-track {
    background-color: #f7f5ff; /* Light grey background */
    border: 1px dashed #ffbdda; /* Optional: border around the thumb */
    border-radius: 20px; /* Optional: round corners for the track */
}

/* Style the thumb (scrollbar handle) */
.toscroll::-webkit-scrollbar-thumb {
    background-color: #ffedf5; /* Grey color for the scrollbar thumb */
    border-radius: 30px; /* Rounded corners for the thumb */
    border: 1px solid #ffbdda; /* Optional: border around the thumb */
}


.cake-image {
  transform: rotate(0deg);
  margin-top: -75px; 
  margin-left: 425px; 
    width: 220px; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
}

/* BUTTONBOX __________________________________________________________ */


.button-box {
    position: absolute;  /* Position it absolutely */
            top: 0;
            left: 490;
    background-color: #f8f8f8; /* Box background color */
    border: 1px solid #f0cee2; /* Box border */
    padding: 9px;             /* Space inside the box */
    border-radius: 3px;        /* Optional: rounded corners */
    height: 260px;             /* Set fixed height */
    width: 220px;              /* Set width */
    background-image: url('https://i.pinimg.com/736x/0c/10/03/0c10030807566642f910b856e5717873.jpg'); /* Tiled background image */
    background-repeat: repeat; /* Ensure the image tiles */
    background-size: 50px 50px; /* Resize the tiled images */
}

.button-header {
    width: 200px;            /* Set width of the image */
    height: auto;           /* Maintain aspect ratio */
    margin: -30px; 
    margin-top: -90px;  /* Optional: Add some margin around the image */
    background-color: transparent;  /* Ensure no background color behind the image */
}
.button-image {
    width: 108px;            /* Set width of the image */
    height: auto;           /* Maintain aspect ratio */
    margin: 30px 58;         /* Optional: Add some margin around the image */
    background-color: transparent;  /* Ensure no background color behind the image */
}

.button2-image {
    width: auto;            /* Set width of the image */
    height: 40px;           /* Maintain aspect ratio */
    margin: -10px -30;         /* Optional: Add some margin around the image */
    background-color: transparent;  /* Ensure no background color behind the image */
}

.buscroll{
  overflow: auto;
  position: absolute;
  width: 190px;
  height: 120px;
  margin-top: 60px;
  margin-left: -5px;
  order: 2;
  rgba(255, 0, 0, 0.3);
}
    
  .codesigma {
    width: 108px;           /* Size of the child box (smaller than the parent) */
    height: 50px;          /* Size of the child box */
    background-color: #fffafc; /* Different background color for visibility */
    border: 1px dotted #f7b0d2; /* Border for the parent box */
    margin-left: 0px;     
    margin-top: 80px;   /* Center the child box inside the parent box */
      padding-left: 30px; 
      padding-top: 10px;
      padding-right: 20px; /* Padding inside the child box */
}


/* BUTTONBOX __________________________________________________________ */




/* Style for the image inside the anchor tag */
.child-box a {
    display: inline-block; /* Ensures the hover effect is applied around the image */
}

.button-image:hover,
.button2-image:hover {
    transform: scale(1.1);  /* Slightly scale up the image */
    transition: all 0.3s ease;  /* Smooth transition effect */
}


#container {
    width: 100%;        /* Ensure the container can grow to full width */
    max-width: 800px;  /* Set the max width */
    margin: 0 auto;     /* Centers the container */
    padding: 0 20px;    /* Optional: Add padding if needed */
    
}

/* WELCOME __________________________________________________________ */

p {
  text-align: center;
}


a p {
  text-decoration: underline; /* Add underline on hover */
  display: inline-block; /* Makes the text inline with the image */
  margin-top: -300;
  margin-left: 160;
  vertical-align: middle;  /* Ensures text is vertically aligned with the image */
}

    /* Style for the parent box */
 .parent-box {
    width: 470px;           /* Size of the parent box */
    height: 420px;          /* Size of the parent box */
    background-image: url('https://files.catbox.moe/2vcmfx.png'); /* Tiled background image */
    background-size: 470px 420px; /* Resize the tiled images */
    border: 1px solid #ddd5f5; /* Border for the parent box */
    padding: 27px;          /* Padding around the inside content */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative;     /* Needed to position child box inside */
}

/* Style for the child box */
.child-box {
    align-items: center; /* Vertically centers the image and text */
    width: 400px;           /* Size of the child box (smaller than the parent) */
    height: 360px;          /* Size of the child box */
    background-color: #fffafc; /* Different background color for visibility */
    border: 1px dotted #f7b0d2; /* Border for the parent box */
    margin: 0 auto;         /* Center the child box inside the parent box */
    padding-left: 30px; 
    padding-top: 10px;
    padding-right: 20px; /* Padding inside the child box */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}



    .child-image {
    width: 200px;            /* Set width of the image */
    height: auto;           /* Maintain aspect ratio */
    margin: -10px 0;         /* Optional: Add some margin around the image */
    background-color: transparent;  /* Ensure no background color behind the image */
}
  
 
  
/* WELCOME __________________________________________________________ */

/* POSTER __________________________________________________________ */



 .poster-box {
   position: absolute;
    background-color: #f8f8f8; /* Box background color */
    border: 1px solid #c1d6e6;    /* Box border */
    padding: 20px;              /* Space inside the box */
    margin: 20px;             /* Space outside the box */
    border-radius: 3px;      /* Optional: rounded corners */
    height: 430px; 
    width: 230px;
        margin-top: 120px;
        margin-left: -316px;
    
       background-image: url('https://i.pinimg.com/736x/e3/88/cc/e388cc841ed694794fb112233ee7ee82.jpg'); /* URL of the tiled background image */
    background-repeat: repeat;  /* Ensure the image tiles */
    background-size: 300px 300px; /* Resize the tiled images to 50x50 pixels */ 
    background-size: cover
 }
 
 .postergirl{
   position: absolute;
    background-image: url('https://files.catbox.moe/s4z6oe.png');
    margin-top: 140px;
    margin-left: -295px;
    height: 250px; 
    width: 185px;
    background-size: contain
 }
 
 .postermelo{
   position: absolute;
    background-image: url('https://files.catbox.moe/qesfvf.png');
    margin-top: 405px;
    margin-left: -295px;
    height: 130px; 
    width: 185px;
    background-size: contain
 }
  
/* POSTER __________________________________________________________ */
  
/* DIRECTORY __________________________________________________________ */

.my-box {
    background-color: #f8f8f8; /* Box background color */
    border: 1px solid #f0cee2;    /* Box border */
    padding: 20px;              /* Space inside the box */
    margin: 20px 0;             /* Space outside the box */
    border-radius: 3px;      /* Optional: rounded corners */
    height: 520px; 
    width: 230px;
        margin-top: -1px; /* Move it upwards by 20px */
    
       background-image: url('https://i.pinimg.com/736x/0c/10/03/0c10030807566642f910b856e5717873.jpg'); /* URL of the tiled background image */
    background-repeat: repeat;  /* Ensure the image tiles */
    background-size: 50px 50px; /* Resize the tiled images to 50x50 pixels */
}
      

.scrold-box {
  border-radius: 200px;
     opacity: 0.6; /* 60% transparent */
  position: relative; 
    z-index: 1;
    background-color: #fffafc; /* Box background color */
    border: 1px solid #f0cee2;    /* Box border */
    padding: 20px;              /* Space inside the box */
    margin: 20px 0;             /* Space outside the box */
    border-radius: 3px;      /* Optional: rounded corners */
    height: 410px; 
    width: 190px;
        margin-top: -300px; /* Move it upwards by 20px */
        margin-left: -258px;
    
}

.directory-image {
    width: 225px;          /* Adjust the width to fit inside the box */
    height: auto;/* Maintain the aspect ratio */
    margin-top: -20px;
    margin-left: -20px;/* Space between the text and image */
    border-radius: 3px;   /* Optional: rounded corners for the image */
}

/* direcotry buttons */
.button-1{
  position: relative; 
    z-index: 2;
  width: 20px;         
  height: auto;
  margin-top: 30px;
  margin-left: 20px;
  display: block;       /* Makes each button take up the full width, stacking vertically */
}

.button-2{
  position: relative; 
    z-index: 2;
  width: 20px;         
  height: auto;
  margin-top: 10px;
  margin-left: 20px;
  display: block;       /* Makes each button take up the full width, stacking vertically */
}

.button-3{
  position: relative; 
    z-index: 2;
  width: 20px;         
  height: auto;
  margin-top: 10px;
  margin-left: 20px;
  display: block;       /* Makes each button take up the full width, stacking vertically */
}

/* DIRECTORY __________________________________________________________ */

/* BUTTON WHEEL __________________________________________________________ */

/* Style for the image rotator box */
.image-rotator-box {
    position: absolute;  /* Position it absolutely */
            top: 405;
            left: 0;
    width: 710px;         /* Set the width of the box */
    height: 82px;        /* Set the height of the box */
    border: 1px solid #ccc; /* Box border */
    overflow: hidden;     /* Hide overflow content */
    background-image: url('https://files.catbox.moe/0h2361.png'); /* Background color */
    background-size: contain;    /* Ensure images fit within the box */
    
      /* Adjust margins to move the box */
    margin-top: 30px;   /* Adds space above the box */
    margin-right: -40px; /* Adds space on the right of the box */
    margin-bottom: auto; /* Adds space below the box */
    margin-left: auto;  /* Adds space on the left of the box */
}

/* Container that holds the images */
.image-container {
    width: 711px;
    height: 82px;
    display: flex;        /* Arrange images in a row */
    flex-direction: row;  /* Ensure the images are in a row */
    animation: moveRightToLeft 20s linear infinite; /* Apply animation from right to left */
}

/* Style for each image */
.rotating-image {
    width: 100px !important;        /* Set each image's width */
    height: auto;         /* Maintain aspect ratio */
    margin: 13 10px;       /* Space between images */
    margin-top: 20px;
    object-fit: contain;    /* Ensure images fit within the box */
}

/* Keyframe animation for rotating images */
@keyframes moveRightToLeft {
    0% {
        transform: translateX(100%); /* Start position */
    }
    100% {
        transform: translateX(-100%); /* Back to start */
    }
}

/* BUTTON WHEEL __________________________________________________________ */


            /* 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: #ED64F5;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
            
                /* header color here! */
                height: 100px;
                /* 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('https://files.catbox.moe/s0mro0.png');
                background-size: 100%;
            }

       

            #flex {
                display: flex;
 flex-direction: horizontal;      /* Align items horizontally (default) */

            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #ffbfe2;
                width: 204px;
                height: 730px;
                padding: 20px;
                font-size: smaller;
                background-image: url('https://i.pinimg.com/736x/67/28/ad/6728adac36ab77ac19ee6f6ee861344b.jpg');
                /* this makes the sidebar text slightly smaller */
            }
   
   
   
   
#header {
    width: 100%;
    height: 100px;
    background-image: var(--header-image);
    background-size: cover; /* Keeps the image covering the header */
    background-position: -58px -5px; /* 20px from the left, 10px from the top */
}
   
              

}

#leftSidebar .box p {
    color: #995c88; /* Change this color to your preferred one              keeping this here for the middle area */
}


            /* this is the color of the main content area,
    between the sidebars! */
            main {
              width: 1000px;
              height: 1000px;
                background-color: #fffcfc;
                flex: 1;
                padding: 20px;
                order: 1;
            }

            /* 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;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-image: url('https://files.catbox.moe/jmg004.png'); /* Tiled background image */
    background-size: 100px 100px; /* Resize the tiled images */
                /* background color for footer */
                width: 1000px;
                height: 40px;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }
            
            

            h1,
            h2,
            h3 {
                color: #c76da3;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #ecaac8;
            }

            /* this is just a cool box, it's the darker colored one */

            }

            /* CSS for extras */

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


            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

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

                aside {
                    width: 1-00%;
                }

                /* 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;
                    
                }

                

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
        </style>

<script>
  function showTab(index) {
    // Remove 'active' class from all tabs and content
    var tabs = document.querySelectorAll('.tab');
    var contents = document.querySelectorAll('.tab-content');
    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    contents.forEach(function(content) {
      content.classList.remove('active');
    });

    // Add 'active' class to clicked tab and its corresponding content
    document.querySelectorAll('.tab')[index].classList.add('active');
    document.getElementById('tab-content-' + index).classList.add('active');
  }
</script>


<script>
  const audio = document.getElementById("my-audio");
  const toggleImage = document.getElementById("music-toggle");

  // Check if the audio is already loaded and ready
  audio.addEventListener("canplaythrough", () => {
    toggleImage.addEventListener("click", () => {
      // Toggle play/pause state
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    });
  });

  // Debugging - log audio state changes
  audio.addEventListener("play", () => {
    console.log("Audio is playing");
  });

  audio.addEventListener("pause", () => {
    console.log("Audio is paused");
  });
</script>

    </body>
</html>