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

h1 {
  color: #5e5b51;
  font-size: 2.5em;
}

h2 {
  color: #5e5b51;
   font-family: "Gluten", cursive;
}

body {
    margin: 0;
    padding: 0;
  background-color: #eee3cb;
  color: #706c60;
   font-family: "Sour Gummy", sans-serif;
}

p1 {
  color: #5e5b51;
  padding: 5px;
  background: #d6cbba;
   font-family: "Sour Gummy", sans-serif;
}

a {
  text-decoration: none;
  /*removes the link underline */
}

a:link, a:visited {
  color: #c94b4b;
}
/* Removes the blue border/outline when a link is clicked or focused */
a:active, a:focus {
  outline: none;
}

a2:link, a2:visited {
  color: white;
}
/* Removes the blue border/outline when a link is clicked or focused */
a2:active, a2:focus {
  outline: none;
}

.text-box {
  display: block;  /* Makes the box width hug the text length */
  width: 1000px;           /* Adjust how wide the box is */
   max-width: 90%;
  height: auto;          /* Adjust how tall the box is */
  padding: 25px;          /* Space between the text and the box edges */
  margin: 10px;           /* Space outside the box */
  background-color: #fff; /* Background color (white here) */
  border: 2px solid #fff; /* Border thickness and color (black) */
  border-radius: 5px;     /* Optional: rounds the corners */
  overflow: visible;      /* No scrollbars; text is fully visible */
}

.foreground-image {
    position: relative;  /* Allows z-index to work on the image */
    z-index: 2;          /* Higher number puts it in front of the bar */
}

.title-container  {
  display: flex;         /* Activates flexbox layout */
   padding: 25px;          /* Space between the text and the box edges */
  align-items: center;   /* Centers icon and text vertically */
   background-color: #fff; /* Background color (white here) */
  border: 2px solid #fff; /* Border thickness and color (black) */
  border-radius: 5px;     /* Optional: rounds the corners */
  gap: 20px;             /* Sets the spacing between icon and text */
}

.title-container2 {
  display: flex;         /* Activates flexbox layout */
   padding: 25px;          /* Space between the text and the box edges */
  align-items: center;   /* Centers icon and text vertically */
   background-color: #d72547; /* Background color (white here) */
  border: 2px solid #d72547; /* Border thickness and color (black) */
  border-radius: 5px;     /* Optional: rounds the corners */
  gap: 20px;             /* Sets the spacing between icon and text */
}


.title-icon {
  width: 65px;           /* Set standard width for the icon */
  height: 65px;          /* Set standard height for the icon */
  object-fit: contain;   /* Prevents the icon image from distorting */
}

.box-text {
  margin: 0 0 10px 0;     /* Removes extra spacing except for a 10px gap at the bottom */
}

.box-image {
  display: block;         /* Prevents a tiny default blank gap underneath the image */
  width: 60%;            /* Forces the image to perfectly match the width of the text above it */
  height: auto;           /* Keeps the image aspect ratio correct so it doesn't look stretched */
  border-radius: 3px;     /* Optional: slightly rounds the image corners to fit the box */
   margin: 15px 0 15px 0;
}

.sidebar-overlay-box {
  position: fixed;        /* Locks the box to the browser window, ignoring page scroll */
  right: 0;               /* Pins the box exactly to the right edge of the screen */
  top: 0;                 /* Pins the top edge to the very top of the screen */
  bottom: 0;              /* Pins the bottom edge to the very bottom of the screen */
  width: 300px;           /* Set whatever explicit width you want for your sidebar */
  height: 100vh;          /* Forces height to be exactly 100% of the visible screen height */
  
  padding: 50px;          /* Internal spacing for your sidebar content */
  background-image: url('TexturaPNG.png');
  background-color: #d6cbba; /* Sidebar background color */
  
  z-index: 2;          /* Ensures this box floats over absolutely all other elements */
  box-sizing: border-box; /* Crucial: includes padding inside the 100vh height calculation */
}

h3 {
  color: White;
   font-family: "Gluten", cursive;
   font-size: 1.8em;
   }
   
   p2 {
  color: white;
  padding:5px;
   font-family: "Sour Gummy", sans-serif;
   font-size: 1.6em;
   }
   
   .fixed-image1 /* Domingos */ {
  position: absolute;
  top: 450px; /* Distance from the bottom of the screen */
  right: 310px;  /* Distance from the left of the screen */
  z-index: 2; /* Ensures the image stays on top of your text */
}

  
   .fixed-image2 /* Bonsai Nº 1 */ {
  position: absolute;
  top: -31px; /* Distance from the bottom of the screen */
  Left: -40px;  /* Distance from the left of the screen */
  z-index: 2; /* Ensures the image stays on top of your text */
}
   
   .fixed-image3 /* Arvorezinha */ {
  position: absolute;
  bottom: 32px; /* Distance from the bottom of the screen */
  right: 88px;  /* Distance from the left of the screen */
  z-index: 3; /* Ensures the image stays on top of your text */
}

.StarterBanner {
  width: 100vw;  
}