/* 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-color: #1a1a1a; /* The dark grey fallback */
  background-image: url("https://i.pinimg.com/736x/2c/84/45/2c8445955eff90477fece025c39d1180.jpg"); 
  background-repeat: repeat;
  margin: 0;
  padding: 0;
}
aside {
  width: 300px; 
  height: 400px;
  background-image: url("https://i.pinimg.com/1200x/87/e2/f9/87e2f9dfa18b1045c42b7190ef3d9b64.jpg");
  background-size: cover;
  
  /*important!! it doesnt work without. REMOVE position: absolute; */
  /* breaks without this. ok REMOVE top: 320px; */
  
  display: inline-block; /* Allows it to sit next to the main content */
  vertical-align: top;   /* Aligns it to the top of the row */
  border-radius: 40px; /* This gives you that 'curbe' you wanted */
  border: 2px solid white; /* Makes them look intentional */
  margin-bottom: 10px;
}



.grid {
  display: flex; 
  justify-content: center; 
  align-items: flex-start; /* This ensures everything 'hangs' from the same top line */
  gap: 20px;
  margin-top: 30px; /* Use THIS to move the whole row down, not individual images */
}

main {
  width: 850px;
  height: auto;
  background-color: #f0f0f0; /* temporary color so you can see it */
  border: 4px double #3d3028;
  color: #3d3028;
  
  margin-left: 315px; /* This pushes the main content to the right of your 300px aside */
  padding: 10px;
}
#wrapper {
  max-width: 1000px; /* This sets the width of your 'site' */
  margin: 0 auto;    /* This centers the whole thing on the screen */
  padding: 20px;
}

.content-box {
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  border: 4px double #4a5d4a; /* A fancy double-line 'barrier' */
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}
img {
  border-radius: 20px;
   border: 2px solid rgba(255,255,255,0.3);
}
.main-container {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(5px);
  border-radius: 25px;
  padding: 30px;
  border: 1px solid white;
  margin-top: 20px;
}
.main-wrapper {
  display: flex; 
  align-items: flex-start;
  gap: 20px;
  
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 20px;
  border-radius: 50px;
}
.title-box {
  flex: 1;
  margin-top: 0;
}
.layout-container {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.images-side img {
  max-width: 400px;
  height: auto;
  border-radius: 40px;
  position: relative;
}
.text-side {
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.7);
  padding: 10px;
  border-radius: 15px;
}
.spacer { 
  height: 800px;
  width: 100%;
}
.title-box { 
  margin-top: 100px;
  border: 1px solid #4a5d4a;
  padding: 20px;
  background: rgba(255,255,255,0.3);
}
.image-stack {
  position: relative;
  display: inline-block;
}
.image-stack img {
  display: block;
  border-radius: 40px;
  width: 100;
  height: auto;
}
.title-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255,255,255,0.7);
  padding: 15px;
  border-radius: 20px;
  border: 2px solid white;
  pointer-events: none;
}
.image-anchor { 
  position: relative; 
  width: fit-content;
  margin: 0; /* Changed from 50px auto to 0 to stop the 'drop' */
  flex-shrink: 0;
}
.main-art { 
  display: block;
  border-radius: 40px;
  max-width: 900px;
}
.title-box {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 25px;
  z-index: 10;
}
/* This is the base for the 'sticker' */


/* This is the big blue art */
.image-anchor img { 
  display: block;
  max-width: 900px;
  height: auto;
  border-radius: 40px; /* The 'curbe' */
  border: 2px solid white;
}

/* This is the Title Box sitting ON TOP of the image */
.title-overlay {
  position: absolute; 
  bottom: 30px;       /* 30px from the bottom of the image */
  left: 30px;         /* 30px from the left of the image */
  z-index: 10;        /* Forces it to the top layer */
  
  background: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(10px); /* Fancy matcha blur */
  padding: 20px;
  border-radius: 25px;
  border: 1px solid white;
  width: 300px;
}
.main-content-row {
    display: flex;
    justify-content: center;
    align-items: center; /* Centers everything vertically in the row */
    gap: 20px;
}

.title-box-middle {
    /* No absolute positioning! Just a normal box now */
    background: rgba(255, 255, 255, 0.7);
    padding: 30px;
    border-radius: 30px;
    border: 2px solid #00000;
    max-width: 300px; /* Keeps the text from getting too wide */
}

.flower-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flower {
    width: 200px;
    border-radius: 40px;
}

.image-anchor img {
    width: 600px; /* Shrunk slightly so everyone fits on one line */
    height: auto;
    border-radius: 50px;
}
.grid {
  display: flex; 
  justify-content: center; /* Centers the whole row */
  align-items: center;     /* Aligns flowers, text, and knight in the middle */
  gap: 20px;               /* Space between them */
  margin-top: 30px;
}

.middle-title-box {
  /* No more 'position: absolute' or 'bottom: 30px'! */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 30px;
  border: 2px solid white;
  max-width: 250px;
  text-align: center;
}

aside {
  width: 300px; 
  height: 400px;
  background-image: url("https://i.pinimg.com/1200x/87/e2/f9/87e2f9dfa18b1045c42b7190ef3d9b64.jpg");
  background-size: cover;
  border-radius: 40px;
  border: 2px solid white;
  flex-shrink: 0; /* Prevents the flowers from squishing */
}

.image-anchor img {
  width: 500px; /* Adjusted so everything fits side-by-side */
  height: auto;
  border-radius: 40px;
}