/* 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 {
    margin: 0;
    font-family: "Georgia", serif;
    background: url('images/gingham-bg.png'); /* your gingham background */
    background-size: cover;
}

.page-wrapper {
    display: block;
    padding: 40px 40px 40px 0; 
    position: relative;
    width: 100%;
    min-height: 100vh;
    border: 1px dashed rgba(0,0,0,.2);
}

.title {
    font-family: "Snell Roundhand", "Brush Script MT", cursive;
    color: #830000;
    font-size: 3rem;
    position: absolute;
    top: 15px;
    left: 45px;
}

.title2 {
    font-family: "Snell Roundhand", "Brush Script MT", cursive;
    color: #830000;
    font-size: 2rem;
}

.title3 {
    font-family: "Snell Roundhand", "Brush Script MT", cursive;
    color: #830000;
    font-size: 2rem;
    text-align: center;
}


.box1 {
  width: 300px;
  height: 300px;
  background-image: url('images/floral-wallpaper.png');
  background-size: cover;
  border: 2px solid #850000;
  position: absolute;
  top: 375px;
  left: 335px;
  padding: 20px;                 /* space so the floral shows around the text area */
  box-sizing: border-box;
}

.pin1 {
  width: 100px;
  height: 50px;
  background-image: url('images/pin.png');
  background-size: cover;
  position: absolute;
  top: 375px;
  left: 450px;
}

.box2 {
  width: 300px;
  height: 375px;
  background-image: url('images/floral-wallpaper.png');
  background-size: cover;
  border: 2px solid #860000;
  position: absolute;
  top: 375px;
  left: 680px;
  box-sizing: border-box;
}

.pin2 {
  width: 100px;
  height: 50px;
  background-image: url('images/pin.png');
  background-size: cover;
  position: absolute;
  top: 375px;
  left: 805px;
}

.lace-box {
  position: absolute;
  top: 125px;
  left: 1050px;
  
  width: 325px;
  height: 525px;

  background: transparent;
  background-image: none !important;
  z-index: -1;
  
}

/* The lace frame overlay */
.lace-box::before {
  content: "";
  position: absolute;
  inset: 0px; /* expands 20px past each edge to create the frame look */
  background: url('images/lace-frame.png') no-repeat center;
  background-size: cover; /* or 'contain' if you never want it cropped */
  pointer-events: none;
  
}

.postcard {
  position: absolute;   /* measured from .page-wrapper */
  top: 375px;
  left: 20px;              /* now really the page edge */
  width: 250px;
  height: 375px;
  background: url('images/postcard.png') no-repeat center/cover;
  z-index: 3;
  outline: 2px solid transparent;
  transform: rotate(-3deg);
}

.tooltip {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  background: rgba(131, 0, 0, 0.8);
  color: white;
  padding: 8px 0;
  font-family: "Snell Roundhand", "Brush Script MT", cursive;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.postcard:hover .tooltip {
  opacity: 1;
}

.scroll-text {
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 8px; /* soft rounded corners */
  color: #DB7093;
  line-height: 1.3;
  font-family: "Times New Roman", serif;

  -webkit-overflow-scrolling: touch;
}

.scroll-text::-webkit-scrollbar {
  width: 8px; /* scrollbar width */
}

.scroll-text::-webkit-scrollbar-track {
  background: #d87093; /* soft background (misty rose) */
  border-radius: 8px;
}

.scroll-text::-webkit-scrollbar-thumb {
  background-color: rgba(255, 228, 225, 0.6); /* pale violet red */
  border-radius: 8px;
  border: 2px solid #d87093; /* space around the thumb */
}

.scroll-text::-webkit-scrollbar-thumb:hover {
  background-color: #c06080; /* slightly darker on hover */
}

.lace-box .scroll-text {
  position: absolute;
  z-index: 1;              /* above the frame */           /* fill the lace box's inner area */
  overflow-y: auto;        /* enables scrolling */
  box-sizing: border-box;
  top: 85px;              /* bigger top padding */
  right: 50px;
  bottom: 100px;           /* bigger bottom padding */
  left: 55px;
  background: transparent;
}

.blythe {
  width: 150px;
  height: 200px;
  background-image: url('images/blythedoll.png');
  background-size: cover;
  position: absolute;
  top: 450px;
  left: 1255px; 
  z-index: 2;
  transform: rotate(7deg);
}

.lace-box .scroll-text > :first-child { margin-top: 0; }
.lace-box .scroll-text > :last-child  { margin-bottom: 0; }

.ephemera {
  width: 850px;
  height: 270px;
  background-image: url('images/ephemera.png');
  background-size: cover;
  position: absolute;
  top: 110px;
  left: 40px; 
  z-index: 2;
}