/* HEADER ITEMS */
#banner{
    border-radius: 12px 12px 12px 12px;
    border: 3px solid #8350c4;
    width: 800px;
    height: 250px;
    background-size: cover;
    background-color: #8350c4; 
    background-image:url(https://i.pinimg.com/1200x/40/1e/cf/401ecf786e5223ae3e0e8b4d2bf123fd.jpg);
    display: block;       /* Makes the image a block element */
    margin-left: auto;    /* Auto margins center it */
    margin-right: auto;
    position: relative;
    
}
    
#logo{
    position:absolute;
    top: 20px;      /* distance from top */
    left: -40px;     /* distance from left */
    z-index: 10;
}

#lilac{
    position: absolute;
    top: 20px;          /* distance from top */
    right: -40px;     /* distance from right */
    z-index: 1;         /* Layers character BEHIND box */
    
}
#lilac img {
    height: 300px;        /* Forces the image to stay exactly as tall as the banner */
    width: auto;
}
.hand {
    position: absolute;
    top: -50px;      /* moves hand position above the box */
    left: 70%;
    transform: translateX(-50%);
     z-index: 10;   /* Layers hand ABOVE box */
    
}


body{
    margin: 0 auto;
    font-family:Georgia, 'Times New Roman', Times, serif;
    cursor: url(https://64.media.tumblr.com/8bdb433c8da54bf50d0ba9005ae6ad13/7dbe929d2d0ae2ad-77/s75x75_c1/23b0a1e7fb5558261db5faec5203d0538ec148f4.gifv), auto;
    background-image: url(https://i.pinimg.com/736x/51/d2/c3/51d2c383c83ab4336d2ec0d0bcb14fd0.jpg) ;

    background-attachment: fixed;    /* Keeps the background locked in place while your boxes scroll over it */    
    
}


/* decobox is to make a container pasted onto the background and mostly decorative*/
/* lighter box */
.decobox1 {
    background: #fad8e8;
    border-radius: 10px;
    color:#4B1535;
    /* Outer Border */
    border: solid 2px #D183A9;        
    
    /* THE INNER BORDER: */
    outline: 1px solid #8350c4;       /* Thin inner line */
    outline-offset: -8px;             /* pushes inner border line away from outer border line*/

    position: relative;
    overflow: visible;
}
/* darker box */
.decobox2 {
    background: #3a3458;
    border-radius: 10px;
    color: #fad8e8;
    /* Outer Border */
    border: solid 2px #D183A9;        
    
    position: relative;
    overflow: visible;
}

/* section is meant for coding */
section {
    display: block;
    unicode-bidi: isolate;
    z-index: 9; /*layers box below hand */
}

/* container is meant for coding and aligning all boxes*/
.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 10px auto;
    
}
/* links container to align all to middle in box*/
.link_container {
  grid-auto-flow: row;
  justify-content: left;
  color: #D183A9;
}
 
/* LEFT COLUMN */
.left { 
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width:200px;
    margin: 10px 10px;
    min-height: 65vh;
}
 
/*MIDDLE COLUMN  */
.middle { 
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    width: 600px;
    margin: 10px 10px;
    border-style: solid;
    box-sizing: border-box;
    flex-shrink: 0;
    border-image: url(https://burgeritchi.neocities.org/biscuit%20border.gif) 6 fill round ;
}
 
/* RIGHT COLUMN */
.right { 
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width:200px;
    margin: 10px 10px;
    min-height: 65vh;
 
}

/* GENERAL FONTS AND TYPOGRAPHY */

h2{
    padding: 0px 20px 0px 20px;
    color:#8350c4;
    margin-bottom: 0px;
}
 
h3 {
    text-align: center;
    padding: 0px 20px 0px 20px;
    margin-top: 15px;
    margin-bottom: 0px;
}

p{
    padding: 0px 8px 0px 8px;
    margin-left: 2px;
}
 
ul {
    list-style-type: none;
    display: block;
    margin: 0;
    padding:5px 5px 5px 5px;
}
 
/* https://www.tumblr.com/saradika-graphics/788077574890913792/cutouts-buttons-free-masterlist-headers?source=share */
#nav_divider {
    width: 100%;                  /* Fills the horizontal width of your Nav box */
    height: 20px;                 /* Set this to the EXACT height of your original divider image */
    
    background-image: url('images/divider.png'); 
    background-repeat: repeat-x;  /* Repeats horizontally if the box is wider than the image */
    background-position: center;  /* Centers the pattern inside the space */
    background-size: auto;        /* Retains the original aspect ratio exactly without distortion */
    
    margin: 5px 0;               /* Adds uniform space above and below the line */
    display: block;
}

#Status{
    display: flex;            /* Activates the Flexbox layout engine */
    flex-direction: column;   /* Stacks the divider, text, and image vertically */
    align-items: center;      /* Centers everything horizontally across the column axis */
    justify-content: center;  /* Coordinates spacing alignments */
    width: 100%;
}




/* LINK STUFF */
#hover a { 
    display: inline-block; 
    transition: .2s ease; 
} 
 
#hover a:hover { 
    transform: translateY(-20%); 
} 
 
.link_container a{
    color:#D183A9;
}
 
.link_container a:hover{
    color:#fad8e8;
}
/* MARQUEE STUFF */
.Marquee {
    max-width: 100%;
    padding:5px;
}
.Marquee img {
    margin-right: 5px;
}
.decobox2:has(.Marquee){
    font-size: 0;              /*removes font space in marquee box */
    outline: 0px;
}
#float {
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    font-size:2em;
    font-weight:bold; 
    color: #fff;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

    
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

/* SPLITTING THE SECTION STUFF */
#sectionsplit{
    display: flex;
    flex-direction: row;      /* Forces paragraph and guestbook side-by-side */
    justify-content: space-between; 
    align-items: center;      /* Centers both items vertically against each other */
    padding: 20px;            /* Adds uniform breathing room inside the decobox border */
    gap: 20px;                /* Adds a clean space gap directly between the two halves */
}
#splitside{
    flex: 2;                  /* Forces this column to fill the row */
    text-align: left;        /* Keeps paragraph text looking neat and flush-left */
}
#splitside p {
    margin: 0;                /* Clean default margin reset */
    font-size: 14px;          /* Adjust text size as you prefer */
}
#Guestbook {
    display: flex;             
    flex-direction: column;    /* Keeps the image and text stacked vertically */
    padding-left: 20px;        /* Moves the padding to the left side so it doesn't touch the edge */
    padding-right: 0px;        /* Resets the old right padding */
    flex: 1;
}

#Guestbook img {
    padding: 10px 10px 10px 10px;
    height: 100px;
    width: auto;
    align-self: flex-start;   /* Aligns both the image and paragraph to the left wall */
    display:block;
}

#Guestbook p {
    margin-top: 5px;           /* Keeps the text close to the image */
    margin-bottom: 10px; 
    margin-left: 23px;
    text-align: left;

}

/* BLOG STUFF */
.blog-post {
    text-align: left;
    padding: 20px;
    margin-bottom: 10px; /* Adds spacing between sequential posts */
}

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 5px;
}

.blog-header h2 {
    margin: 0;
    font-size: 27px;
    padding: 0px;
}

.blog-date {
    font-size: 0.85em;
    font-style: italic;
    color: #666;
}

.blog-content {
    margin: 15px 0;
    line-height: 1.4;
}
/* READ MORE STUFF */

.more-text {
    display: none;  /* Hide the extended blog text by default */
}

/* Style the Read More button to match your site theme */
.read-more-btn {
    background-color: #FDF1DB;    /* Matches your light cream background */
    color: #8350c4;               /* Purple text color */
    border: 2px solid #8350c4;    /* Strong solid purple outline */
    border-radius: 4px;
    padding: 4px 10px;
    font-family: 'ms gothic', monospace;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    margin-top: 10px;
    transition: all 0.1s ease;
}   

/* FILTER TAGS */

.blog-footer {
    margin-top: 15px;
    padding-top: 5px;
}

.blog-tags, .sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Spacing between tags */
    padding: 0 5px;
}

.tag-link {
    font-size: 15px;
    display: inline-block;
    background-color: #8350c4;    /* Purple fill */
    color: #ffffff !important;    /* Crisp white text override */
    text-decoration: none;        /* Removes underline */
    padding: 3px 8px;
    border: 1px solid #000000;    /* Classic vintage thin outline */
    border-radius: 4px;
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.tag-link:hover {
    background-color: rgb(25, 0, 255); /* Swaps to blue on hover */
    transform: translateY(-1px);       /* Slight pop up click feedback */
}

/* Sidebar Tag Box Spacing adjustment */
.sidebar-tags {
    padding: 15px;
    justify-content: center;
}











/* for rainbow stuff
border-image-slice: 1;
border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
min-height: 65vh;  
*/


/* rainbow text
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    */