/* 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." */
    @import url('https://fonts.googleapis.com/css2?family=Syne+Tactile&display=swap');
    .syne-tactile-regular {
  font-family: "Syne Tactile", system-ui;
  font-weight: 400;
  font-style: normal;
}
body{
  font-family: "Syne Tactile";
        background-image: url(IMG_8734.jpg);
        background-size: cover;
    }
#reads-page{
  background-image: url(IMG_8785.jpg);
background-size:cover;
  background-size: 90%; 
}

#crochetprojects-page
{background-image: url(back.jpg);
background-size: cover;
}

#favthings-page
{background-image:url(IMG_8795.jpg);
background-size: cover;
}

#scent-page
{background-image: url(real.jpg);
background-size: cover;
}

    .wrapper {
      border-radius: 10px;
       background-color: rgba(88, 47, 54, 0.9);
      border: 4px solid #3b2225;
    /* 1. Sets the maximum width the content can expand to */
    max-width: 1000px; 
    
    /* 2. Ensures the layout shrinks smoothly on mobile screens */
    width: 100%; 
    
    /* 3. Centers the wrapper horizontally in the browser window */
    margin: 0 auto; 
    
    /* 4. Keeps content from touching the screen edges on mobile */
    padding: 0 20px; 
    
    /* 5. Prevents padding from breaking your max-width calculation */
    box-sizing: border-box; 
}
.wrapper.bg-yellow {
  background-color: rgba(154, 117, 109,0.9); 
  border: 4px solid #713946;
     /* 1. Sets the maximum width the content can expand to */
    max-width: 1000px; 
    
    /* 2. Ensures the layout shrinks smoothly on mobile screens */
    width: 500px; 
    
    /* 3. Centers the wrapper horizontally in the browser window */
    margin: 0 auto; 
    
    /* 4. Keeps content from touching the screen edges on mobile */
    padding: 0 20px; 
    
    /* 5. Prevents padding from breaking your max-width calculation */
    box-sizing: border-box; 
  overflow-wrap: break-word; /* Breaks long words if they exceed the container width */
  word-break: break-word;    /* Fallback for older browsers */
  white-space: normal;       /* Ensures text wraps normally at spaces (default) */
}
.wrapper.bg-blue {
  background-color: rgba(71, 100, 111, 0.9); 
  border: 4px solid #2c3e50;
  height: 350px
  /* unique color */
}
.wrapper.bg-steel {
  background-color: rgba(154, 117, 109,0.9);
  border: 4px solid #713946;
  width: 400px
}
.wrapper.bg-green {
  background-color: rgba(151, 156, 124, 0.9);
  border:4px solid #6a6d57;
  width: 400px;
  height:100px
  
  }
  
  /*crochet page */
  .wrapper.bg-white {
    background-color:rgba(89, 94, 52, 0.9);
    border: 4px solid #3a3c22;
  }
  .wrapper.bg-brown{
    background-color:rgba(110, 38, 31, 0.98);
    border: 4px solid #451a14;
    width: 900px;
    height: 400px
  }
  .wrapper.bg-yaya {
    background-color:rgba(195, 155, 100, 0.9);
    border: 4px solid #9c7c50;
    width:250px
  }
  .wrapper.bg-bblue {
    background-color: rgba(125, 140, 129, 0.9);
    border: 4px solid #647067;
    width: 250px
  }
  
  /*fav things page*/
  .wrapper.bg-polka { 
    background-color: rgba(177, 159, 84, 0.9);
    border: 4px dotted #555329;
  }
  .wrapper.bg-fav {
    background-color: rgba(104, 55, 79, 0.9);
    border: 4px dotted #492737;}
  
  
  /*2026 reads page*/
  .wrapper.bg-maroon {
    background-color: rgba(135, 63, 67, 0.9);
    border: 4px solid #5f2c2f;
  }

  .wrapper.bg-ru{
      background-image: url('RU.jpg'); 
  border: 4px solid #5f2c2f;
  }
  .wrapper.bg-ru2{
      background-image: url('RU copy.jpg');
       background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  }
  
  /*scent page*/
  .wrapper.bg-scent{
    background-color: rgba(106, 109, 54, 0.9);
    border: 4px dotted #6b5b3f;
  }
    .wrapper.bg-scent2{
    background-color: rgba(115, 81, 68, 0.9);
    border: 4px solid #646939;
  }
  
  /*hover feature*/
  
  .image-container {
  position: relative;
  display: inline-block;
}

.image-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0.6);
  color: white;
  padding: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .image-title {
  opacity: 1; /* Reveals the title on hover */
}