:root {
    --bg-pink: #ffd6e0;
    --soft-white: rgba(255, 255, 255, 0.88);
    --border-pink: #ffb6c1;
    --text-main: #6b4c5a;
    --text-highlight: #d1497b;
    --link-color: #ff8fab;
}

.container {
  display: grid; 
  grid-gap: 15px;
  grid-template-areas:
    "hero hero"
    "header header"
    "sidebar main"
    "footer footer"/;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto 1fr auto;
  min-height: 95vh;
  background-color: #f7f4eb;
  padding: 20px;
  box-sizing: border-box;
}

.header-wrapper {
    grid-area: header;
    position: relative; /* CRITICAL: Acts as the anchor anchor for the peeking image */
    width: 100%;
}

header, aside, main, footer {
  background-color: darkmagenta;
  padding: 25px;
  box-sizing: border-box;
  border: 3px solid pink;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow: 5px 5px 5px pink; 
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: black;
  transition: transform 0.2s ease;
}

header {
  width: 100%;
  grid-area: header;
  transform: rotate(-1deg);
  background-color: #ffb6c1;
}

/* Target the image by its specific class name */
.top-layer {
    top: -45px;
    left: 40px;
    width: 250px;         /* Keeps it at your preferred normal size */
    height: auto;
    position: absolute;   /* Activates layer stacking controls */
    z-index: 99;          /* Floating safely on top layer */
    display: block;
    margin: 20px auto;    /* Centers the image neatly on the screen */
}

aside { 
  grid-area: sidebar;
  transform: roate(2deg);
}
main { 
  grid-area: main;
  transform: rotate(-0.5deg);
  font-family: 'Courier New', Courier, monospace;
  }
footer { 
  grid-area: footer;
  transform: rotate(1.5deg);
  }
  
  header:active, aside:active, main:active, footer:active {
    transform: scale(0.98) rotate(0deg);
    box-shadow: 2px 2px 0px pink;
  }

body {
    direction: ltr;
    background: pink url("flowerbuns.jpg") center/cover fixed;
    font-family: 'Fredoka', sans-serif;
    color: pink;
    margin: 0; padding: 40px 20px 40px 260px;
    display: flex; justify-content: center; min-height: 100vh; box-sizing: border-box;
}

.pixel-seam-divider {
    grid-area: divider;
    width: 100%;
    height: 24px; /* Match the exact pixel height of your tiny icon tile */
    
    /* Directs the browser to line your image up horizontally without vertical stretching */
    background-image: url('your-small-icon.png');
    background-repeat: repeat-x; /* Tiles your graphic perfectly across the page seam */
    background-position: center;
    
    margin: 15px 0;
}

  .container img {
    top: 20px;
    left: 50%;
    width: 250px;
    height: auto;
    position: absolute;
    z-index: 9999;
    display: block;
    margin: 20px auto
  }