/* General page theme */
/* body {
  margin: 0;
  font-family: 'Georgia', serif;
  background: #FEFEED;
  color: #5a4a42;
  background-image: url("");
  background-size: cover;
  background-attachment: fixed;
  min-width: 1000px; 
} */

body {
  margin: 0;
  overflow-x: auto;     /* allow scrolling when screen is too small */
  display: flex;
  justify-content: center;   /* center horizontally ALWAYS */
  align-items: flex-start;   /* optional, keeps page at top */
  min-width: 100%;      /* prevents collapsing */
}


.scale-wrapper {
  transform: scale(0.80);
  transform-origin: top center;
  
  /* The magic fix — makes the wrapper shrink instead of leaving space */
  width: 1000px;
  margin: 0 auto;
}

/* Page container */
.page-wrap {
  position: relative;
  width: 1000px;      /* fixed width */
  height: 1200px;     /* fixed height */
  margin: 0 auto;     /* center horizontally */
  background: #FEFEED;
  border: 1px solid #e0d6cf;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  padding: 20px 25px;
  overflow: hidden;
}

/* Fonts */
@font-face {
  font-family: ktegaki;
  src: url(https://dl.dropbox.com/s/likp0uru5np58yn/KTEGAKI.ttf);
}
.gothic { font-family: ms gothic; }

/* Header */
header {
  text-align: center;
  padding: 25px 10px;
  font-size: 1.8em;
  color: #5a4a42;
  border-bottom: 2px solid #d8c2b2;
  background: rgba(255, 245, 240, 0.9);
  background-image: url('images/lace-top.png');
  background-repeat: repeat-x;
  background-position: top;
  font-family: ktegaki;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

/* Layout grid */
.layout {
  display: grid;
  grid-template-columns: 160px 570px 240px; /* fixed columns */
  gap: 15px;
  margin-top: 20px;
}

.sidebar, .content {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e0d6cf;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}

.sidebar.left .divider {
  display: block;
  margin: 10px auto;
}

/* Navigation */
.sidebar.left ul { list-style: none; padding: 0; }

.sidebar.left a {
  display: block;
  color: #5a4a42;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px dotted #d9c8ba;
  transition: all 0.2s ease;
}
.sidebar.left a:hover {
  color: #b98b8f;
  letter-spacing: 0.5px;
}

/* Scrollbox */
#scrolly { 
  overflow-y: scroll; 
  overflow-x: hidden; 
  width: 135px; 
  height: 116px; 
  margin: 10px auto; 
  text-align: center; 
  background-color: #FFF; 
  transform: translateY(5px);
}
#scrollyheader { margin: 2px; border-bottom: 1px dotted #ff668a; }

/* Profile */
.profile-pic { width: 200px; border-radius: 8px; margin-bottom: 10px; }
.profile-text { font-style: italic; text-align: center; color: #6e5c53; }

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  font-size: 0.9em;
  color: #7b665a;
  border-top: 1px solid #d8c2b2;
  margin-top: 20px;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 245, 240, 0.9);
}

/* Stickers */
.sticker {
  position: absolute; /* relative to page-wrap */
  pointer-events: none;
  opacity: 0.9;
  z-index: 10;
  transition: transform 0.2s ease;
}

.sticker.guestbook {
  pointer-events: auto;
}
.sticker.guestbook:hover {
  transform: rotate(3deg);
}

/* Sticker positions in pixels */
.ribbon { top: 5px; left: 0px; width: 120px; transform: rotate(-3deg);}
.open { top: 45px; left: 10px; width: 220px;}
.tea { top: 50px; right: 160px; width: 120px;}
.flowers { bottom: 800px; right: 750px; width: 130px; transform: rotate(-40deg); z-index: 10;}
.guestbook { bottom: 800px; right: 700px; width: 130px;}
.tag { top: 50px; right: 150px; width: 120px;}
.cuddle { top: 120px; right: 150px; width: 75px;}