/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  body {background-image: url(Images/forest-fl-feel-bg.png);
        margin: 0;
        padding: 0;
        background-attachment: fixed; /* Keeps background still while scrolling */
  }
  @font-face {
    font-family: 'DropShade-Shadow';
    src: url('Fonts/DropShade-Shadow.ttf'); 
            }
 @font-face {
    font-family: 'Le Cristal de Lune';
    src: url('Fonts/Le Cristal de Lune.ttf'); 
            }
@font-face {
    font-family: 'The Secret Mouse';
    src: url('Fonts/The Secret Mouse.ttf'); 
            }
@font-face {
    font-family: 'Super Popstar';
    src: url('Fonts/Super Popstar.ttf'); 
            }
@font-face {
    font-family: 'Cracked Bold';
    src: url('Fonts/CrackedBold Regular.ttf'); 
            }
@font-face {
    font-family: 'Bangpop';
    src: url('Fonts/Bangpop.ttf'); 
            }            
@font-face {
    font-family: 'ClassVariable';
    src: url('Fonts/ClassVariable.ttf'); 
            } 
@font-face {
    font-family: 'Deutsch';
    src: url('Fonts/Deutsch.ttf'); 
            }             
@font-face {
    font-family: 'Grow Year';
    src: url('Fonts/Grow Year.ttf'); 
            }   
@font-face {
    font-family: 'Kindergo';
    src: url('Fonts/Kindergo.ttf'); 
            }   
@font-face {
    font-family: 'Long_Shot';
    src: url('Fonts/Long_Shot.ttf'); 
            }  
 @font-face {
    font-family: 'Love Is Amour';
    src: url('Fonts/Love Is Amour.ttf'); 
            }            
  @font-face {
    font-family: 'PirataOne-Regular';
    src: url('Fonts/PirataOne-Regular.ttf'); 
            }
  @font-face {
    font-family: 'Rahull';
    src: url('Fonts/Rahull.ttf'); 
            }            
   @font-face {
    font-family: 'Scribble Show';
    src: url('Fonts/Scribble Show.ttf'); 
            }  
            
    hr {
  border: none;                /* Remove the default gray border */
  height: 5px;                 /* This sets the thickness of the line */
  background-color: #443742;      /* This sets the color */
  width: 100%;                 /* Makes it span the whole page */
      }
   .header-box {
     background-color: #AEB4A9;
      background-image: url(Images/box-bg.png);
      background-size: contain;
      background-repeat: repeat-x;
      cursor: url('Images/fairy-icon.png'), auto;
      border: 3px solid transparent; /* The dark color from your font */
      border-radius: 15px; /* Rounds the corners like the example */
      padding: 20px;
      margin: 10px;
      position: relative; /* Important for "floating" images later */
      display: flex;
      align-items: center;
      justify-content: center;
      /* overflow: hidden;  Keeps everything inside the rounded box */
            } 
            
      .nav-box {
      background-color: rgba(174, 180, 169, 0.90); /* Matches your body box transparency */
      border: 2px solid #443742; /* A thin solid line to define the menu */
      border-radius: 10px;
      margin: 10px;
      padding: 10px 20px; /* Thinner padding (top/bottom is only 10px) */
      display: flex;
      justify-content: space-around; /* Distributes links evenly across the bar */
      align-items: center;
      backdrop-filter: blur(5px);
      cursor: url('Images/fairy-icon.png'), auto;
                }
            
     .nav-box a {
     text-decoration: none;
     color: #443742;
     font-family: 'Le Cristal de Lune';
     font-size: 120%;
     font-weight: bold;
     transition: 0.3s;
                }
                
     .nav-box a:hover {
     text-decoration: underline; /* Adds the underline */
     text-underline-offset: 5px;
     color: #52050A; /* Changes on hover */
     letter-spacing: 2px; /* Slight expansion effect */
     font-size: 140%;             /* Increased from 120% */
     font-weight: bold;
     transition: 0.2s;            /* Keeps size changes smooth */
     display: inline-block;
     cursor: url('Images/grape-cursor.png'), auto;
     animation: rattle 0.5s;      
     animation-iteration-count: infinite;
                      }

   .body-box {
     background-color: rgba(250, 243, 221, 0.90);
     cursor: url('Images/fairy-icon.png'), auto;
      
      border: 3px solid transparent; /* The dark color from your font */
      border-radius: 15px; /* Rounds the corners like the example */
      padding: 20px;
      margin: 10px;
      position: relative; /* Important for "floating" images later */
      display: flex;
      align-items: center;
      justify-content: center;
      
      /* overflow: hidden;  Keeps everything inside the rounded box */
            } 
            
      .main-content-area {
      flex-grow: 1;            /* Tells this box to take up all remaining space */
      min-height: 500px; /* Makes sure the page isn't 'short' if there's no text */
      display: block; /* Changing from flex to block allows text to wrap around floats */
  overflow: visible; 
  padding: 20px; /* Gives the text some breathing room */
                          }  
                          
      /* This is the invisible 'box' that holds your two columns */
      .main-layout {
      display: flex;
      align-items: flex-start; 
      gap: 15px;
      margin: 10px;
      padding-top: 0;
                }

    /* The left column */
    .sidebar-column {
     width: 400px;            /* Keeps the sidebar at a fixed width */
     flex-shrink: 0;          /* Prevents the main area from squishing it */
     display: flex;
     flex-direction: column;  /* Stacks multiple sidebar widgets vertically */
    gap: 10px;               /* Space between the sidebar widgets themselves */
                    }
                    
    .sidebar-column .body-box {
    flex-direction: column; /* Stacks title on top of the guestbook */
    display: flex;
    align-items: center;    /* Centers them horizontally */
    justify-content: flex-start;
                             }
                    
    .widget-title{
      background-color: #D8B4A0;
      font-family: 'The Secret Mouse';
      color: #395B50;
      text-align: center;
      padding: 5px;
      margin: -15px -15px 50px -15px; /* This pulls the title to the edges of the box */
      border-radius: 12px 12px 12px 12px;   /* Rounds only the top corners */
      width: 100%;
                }
            
  .side-image {
  height: 200px;       /* Adjust this to match your font size */
  width: auto;         /* Keeps the flower from looking squished */
  vertical-align: middle; 
  margin: 0 10px;     /* Adds a 20px gap between the flower and the text */
              }
              
  .right-bottom-image{
  position: absolute;   /* This lets us "pin" it to a specific spot */
  bottom: -10px;          /* 5 pixels up from the bottom edge */
  right: -20px;           /* 5 pixels in from the right edge */
  height: 250px;         /* Adjust size as needed */
  width: auto;
  z-index: 1;           /* Keeps it layered correctly */
              }           
              
 .right-corner-image {
  position: absolute;   /* This lets us "pin" it to a specific spot */
  top: -50px;          /* 5 pixels up from the bottom edge */
  right:  -20px;           /* 5 pixels in from the right edge */
  height: 250px;         /* Adjust size as needed */
  width: auto;
  z-index: 1;           /* Keeps it layered correctly */
              }    
              
  @keyframes rattle {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  20% { transform: translate(-1px, -2px) rotate(-1deg); }
  40% { transform: translate(-3px, 0px) rotate(1deg); }
  60% { transform: translate(3px, 2px) rotate(0deg); }
  80% { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(-1px, 2px) rotate(-1deg); }
                    }
                    
 .my-gb {
  /* This shifts the colors. Adjust the degrees (1-360) to find the right tint */
  filter: sepia(0.6) hue-rotate(-20deg) saturate(0.8) contrast(1.1);
  
  border-radius: 10px;
  width: 100%;
  max-width: 400px; /* Adjust to fit your sidebar width */
  border: none;
  height:500px; 
  border-radius:10px;
  margin: none;
}                   
      
/* Remove the top margin from the very first box in each column */
.sidebar-column > .body-box:first-child,
.content-column > .widget-row:first-child {
    margin-top: 0;
}

/* 1. The Frame (The Oval Window) */
.profile-frame {
  width: 150px;
  height: 150px;
  
  /* The Oval 'Cutout' logic moves here */
  border-radius: 50%;
  overflow: hidden; 
  
  /* The Border Frame moves here */
  border: 10px solid #223843; 
  
  /* The Shadow moves here so it surrounds the oval */
  box-shadow: 0px 8px 15px rgba(0,0,0,0.4);
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. The Photo (The actual image inside) */
.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This prevents the image from stretching */
  display: block;
}

/* 3. The Widget (The outer glass box) */
.profile-widget {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* This holds the entire right side of your page */
.content-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Makes it fill the remaining width */
  gap: 10px;    /* Space between the rows and the main box */
}

/* This makes the three boxes sit side-by-side in a row */
.widget-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Styles for the individual mini-boxes */
.mini-box {
  flex: 1;      /* Makes all three boxes the exact same width */
  margin: 0;    /* Overriding default margins to keep alignment tight */
  padding: 0px;
  flex-direction: column;
  overflow: hidden; /* Keeps the header corners rounded */
  display: flex;
}



.mini-img {
  width: 60px;
  height: 90px;
  border: 2px solid #223843;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}


.music-box {
  padding: 5px; /* Minimal padding for the player */
  justify-content: center;
}



/* The "reading status" header at the top */
.mini-header {
  background-color: #D8B4A0; /* Desert Sand */
  color: #395B50;           /* Jet Black */
  width: 100%;
  padding: 5px 0;
  text-align: center;
  font-family: 'The Secret Mouse';
  
}

/* Container for Image and Text side-by-side */
.mini-content {
  display: flex;
  flex-direction: row; /* Puts items in a row */
  align-items: center;
  padding: 0px;
  gap: 10px;
  width: 100%;
}



.mini-text {
  text-align: left; /* Aligns text to the left as per your Ph. drawing */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-title {
  font-family: 'Le Cristal de Lune';
  font-weight: bold;
  font-size: 110%;
  margin: 0;
  color: #443742;
}

.book-author {
  font-family: 'Le Cristal de Lune';
  font-size: 90%;
  margin: 0;
  color: #443742;
}


/* Base style for the Neocities link */
.neo-link {
    text-decoration: none;
    color: #443742;
    font-family: 'Le Cristal de Lune';
  
    font-weight: bold;
    transition: 0.3s;
    display: inline-block; /* Required for the rattle animation to work */
}

/* Hover style (matches your nav links) */
.neo-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    color: #52050A; 
    letter-spacing: 2px;
    font-size: 140%;
    transition: 0.2s;
    cursor: url('Images/grape-cursor.png'), auto;
    animation: rattle 0.5s;      
    animation-iteration-count: infinite;
}

/* The Hidden Spoiler Box */
.spoiler {
  background-color: black; /* Your dark text color becomes the background block */
  color: black;            /* The text is the exact same color, making it invisible! */
  border-radius: 4px;        /* Softens the edges of the block slightly */
  padding: 0 5px;            /* Gives the hidden text a tiny bit of padding */
  transition: all 0.3s ease; /* Makes the reveal smooth instead of abrupt */
  cursor: help;              /* Changes the mouse cursor to a question mark */
}

/* The Reveal (When someone hovers over it) */
.spoiler:hover {
  background-color: #D8B4A0; /* Changes the background to your desert sand color */
  color: #395B50;            /* Changes the text to your dark green so it is readable */
}