/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: url('https://i.pinimg.com/1200x/17/39/7b/17397b99b8a8084b807ff04a4f4885e9.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Borel', sans-serif;
  color: #333;
  padding: 20px;
  line-height: 1.4;
}

h1 {
  color: #ffc0cb;
  font-size: 2.5em;
  margin-bottom: 20px;
  text-shadow: 
    -1px -1px 0 #ff5aa8,
     1px -1px 0 #ff5aa8,
    -1px  1px 0 #ff5aa8,
     1px  1px 0 #ff5aa8;
}

/* Section wrapper */
.pink-currently-wrapper {
  margin: 20px 0 40px;
}

/* Stage (1440x770 area) */
.pink-currently-stage {
  position: relative;
  width: 1440px;
  height: 770px;
  margin: 0 auto;
  background: transparent;
}

/* Box styling (larger now) */
.pink-currently-window {
  position: absolute;
  width: 400px;
  height: 300px;
  background:
    linear-gradient(90deg, var(--pink-200) 50%, #fff 50%) 0 0/24px 24px,
    linear-gradient(0deg , var(--pink-200) 50%, #fff 50%) 0 0/24px 24px;
  border: 3px solid var(--pink-700);
  border-radius: 18px;
  padding: 10px;
  font-size: 1em;
}

/* Positioning the three boxes with coordinates */
.box1 { top: 50px; left: 60px; }
.box2 { top: 50px; left: 500px; }
.box3 { top: 50px; left: 940px; }

.box4 { top: 525px; left: 80px; }
.box5 { top: 525px; left: 520px; }
.box6 { top: 525px; left: 960px; }

/* Keep your original inner design */
.pink-currently-inner {
  position: relative;
  height: 100%;
  background: var(--pink-800);
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}
.pink-currently-inner::before {
  content:"";
  position:absolute; inset:4px;
  border:2px solid #fff;
  border-radius: 8px;
  pointer-events: none;
}

/* Scroll area */
.pink-currently-scroll { height: 100%; overflow: auto; }
.pink-currently-scroll::-webkit-scrollbar { width: 14px; }
.pink-currently-scroll::-webkit-scrollbar-track {
  background:
    radial-gradient(#ff5aa8 20%, transparent 21%) 0 0/12px 12px,
    var(--pink-300);
  border-radius: 8px;
}
.pink-currently-scroll::-webkit-scrollbar-thumb {
  background: var(--pink-700);
  border: 3px solid var(--pink-300);
  border-radius: 10px;
}

/* Content layout */
.pink-currently-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pink-item {
  flex: 1 1 45%;
  min-width: 120px;
}

/* Decorative elements */
.pink-rail {
  position:absolute;
  top:10px; right:10px; bottom:10px;
  width: 24px;
  border-radius: 8px;
  background:
    radial-gradient(#fff 20%, transparent 21%) 0 0/8px 8px,
    var(--pink-700);
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding:4px;
}
.pink-rail .rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}
.pink-bottom-ribbon {
  position:absolute;
  left:10px; right:40px; bottom:10px;
  height:20px;
  border-radius: 6px;
  background:
    radial-gradient(#fff 20%, transparent 21%) 0 0/10px 10px,
    var(--pink-700);
}

/* Palette */
:root {
  --pink-200:#ffe2ee;
  --pink-300:#ffd1e7;
  --pink-700:#ff5aa8;
  --pink-800:#e94a99;
}




