@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

/* highlight color */
::selection {
  background: #f7abcf;
  color: #FFFFFF;
}

/* MAIN CONTAINER */
.main-container {
    width: 80%;
    max-width: 900px;
    margin: 80px auto 40px auto;
    padding: 30px;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);

    border-radius: 20px;
    border: 2px solid #f7cce9;

    box-shadow: 0 0 20px rgba(255, 182, 222, 0.4);

    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* UNIVERSAL BOX STYLE */
.welcome-box,
.status-box,
.socials-box,
.music-box,
.updates-box,
.message-board,
.buttons-box,
.listings-box {
    background: rgba(255, 240, 250, 0.7);
    border: 2px solid #f7cce9;
    border-radius: 18px;
    padding: 20px;
    margin: 10px 0;
}

/* HEADERS */
.welcome-box h1,
.status-box h2,
.socials-box h2,
.music-box h2,
.updates-box h2,
.message-board h2,
.buttons-box h2,
.listings-box h2 {
    margin-top: 0;
    color: #d88acb;
    font-size: 24px;
    font-weight: 600;
}
/* TOP ROW FOR LEFT COLUMN + FUTURE RIGHT STUFF */
.top-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;          /* make the row use full container width */
}

/* LEFT COLUMN WIDTH */
.left-column {
  width: 260px;           /* fixed width for the image column */
}

/* MIDDLE COLUMN WIDTH (ABOUT OC) */
.middle-column {
  flex: 1;                /* take all remaining space */
}

/* ABOUT CARD (OC + ABOUT ME) */
.about-card {
  background: rgba(255, 240, 250, 0.7);
  border: 2px solid #f7cce9;
  border-radius: 18px;
  padding: 12px 12px 16px;
  text-align: center;
}
.info-card {
  background: rgba(255, 240, 250, 0.7); /* or change to blue */
  border: 2px solid #f7cce9;
  border-radius: 18px;
  padding: 16px;
}

.oc-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 2px solid #f7cce9;
  box-shadow: 0 0 10px #ffd6f7, 0 0 20px #c3f4ff;
  display: block;
  margin-bottom: 8px;
}

.about-card h2 {
  margin: 4px 0 6px;
  font-size: 18px;
  color: #d88acb;
  font-weight: 600;
}

.about-card p {
  margin: 0;
  font-size: 13px;
}

/* TOP STRIP */
.top-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background: #ff99cc;
  border-bottom: 8px solid #fff1f9;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 9999;
  padding-left: 12px;
}

/* ombre line under strip */
.top-strip::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #bf85f6, #ffd6f2, #9ffffc);
  z-index: 9997;
}

/* lace */
.top-strip::after {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  width: 170%;
  height: 50px;
  background-image: url("https://image2url.com/r2/default/images/1772166239207-332a38c9-1a9c-4c6e-b51e-f2ba1eb94699.png");
  background-repeat: repeat-x;
  background-size: 200px 30px;
  pointer-events: none;
  z-index: 9998;
}

/* LOOPING TEXT */
.loop-text {
  font-family: 'Silkscreen', sans-serif;
  display: inline-block;
  white-space: nowrap;
  font-size: 15px;
  color: white;
  animation: smooth-loop-Left 20s linear infinite;
}

@keyframes smooth-loop-Left {
  0% { transform: translateX(180%); }
  100% { transform: translateX(-110%); }
}

/* SOFT TEXT GLOW */
body, p, h1, h2, h3, a, li, span {
  text-shadow: 0 0 3px #ffffff;
}

/* EXTRA GLOW */
.container, .banner, .about-box, .paint-box {
  box-shadow: 0 0 10px #ffd6f7, 0 0 20px #c3f4ff;
}
/* RIGHT COLUMN */
.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* UNIVERSAL BOX STYLE FOR RIGHT COLUMN */
.right-column .box {
  background: rgba(255, 240, 250, 0.7);
  border: 2px solid #f7cce9;
  border-radius: 18px;
  padding: 16px;
}

/* SCROLLBOX */
.oc-scrollbox .scroll-inner {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid #f7cce9;
  border-radius: 12px;
  padding: 10px;
  height: 180px;
  overflow-y: auto;
  font-family: 'Silkscreen', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

/* MESSAGE BOX */
.oc-messagebox textarea {
  width: 100%;
  height: 120px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid #f7cce9;
  border-radius: 12px;
  padding: 10px;
  font-family: 'Silkscreen', sans-serif;
  font-size: 12px;
  color: #d88acb;
}
/* FINAL — ABOUT OC SCROLLBOX FIX */
.info-scroll {
  background: rgba(255, 200, 240, 0.85) !important; /* visible pink */
  border: 2px solid #f7cce9;
  border-radius: 14px;
  padding: 12px;

  height: 240px;
  overflow-y: auto;

  font-family: 'Silkscreen', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}.welcome-box {
    min-height: 150px; /* change this number to make it taller */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.middle-column {
    flex: 1;
}