/* ===== BODY ===== */
body {
    background: #ffeef5;
    font-family: "Tahoma", sans-serif;
    margin: 0;
    color: #6b4b63;
}

/* ===== CENTERED CONTAINER ===== */
#container {
    width: 900px;
    margin: 20px auto;
    background: #fff;
    border: 3px solid #f7c6d9;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255,182,193,0.4);
    overflow: hidden;
}

/* ===== HEADER IMAGE ===== */
#header {
    height: 180px;
    background-image: url("https://i.ibb.co/nxHtD5P/IMG-8109.gif");
    background-size: cover;
    background-position: center;
    border-bottom: 4px dotted #ffb6d5;
}

/* ===== NAVBAR (CUTE TABS) ===== */
#navbar {
    background: #ffd6e7;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 2px solid #ffc2dc;
}

#navbar a {
    background: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #ffb6d5;
    font-size: 14px;
    color: #c45a8c;
    transition: 0.2s;
}

#navbar a:hover {
    background: #ffe4f1;
}

/* ===== LAYOUT ===== */
#layout {
    display: flex;
    gap: 8px;
    padding: 10px;
}

/* ===== SIDEBARS ===== */
#left, #right {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== MAIN ===== */
#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== BOXES ===== */
.box {
    background: #fff7fb;
    border: 1px solid #ffc2dc;
    padding: 8px;
    border-radius: 8px;
}

/* HEADINGS */
.box h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    background: #ffd6e7;
    padding: 4px;
    border-radius: 6px;
}

/* MAIN BOX */
.mainbox {
    background: #fff0f6;
}

/* ===== IMAGES ===== */
img {
    max-width: 100%;
    border-radius: 6px;
}

/* ===== SCROLL BOX ===== */
.scroll-box {
    max-height: 100px;
    overflow-y: auto;
}

/* ===== IMAGE WALL ===== */
.image-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.image-wall img {
    width: 60px;
}

/* ===== BLINK TEXT ===== */
.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% {opacity: 0;}
}

/* ===== MARQUEE ===== */
marquee {
    background: #ffd6e7;
    color: #c45a8c;
    padding: 4px;
    font-size: 13px;
}

/* ===== FOOTER ===== */
#footer {
    background: #ffd6e7;
    text-align: center;
    padding: 8px;
    border-top: 2px solid #ffc2dc;
}

/* ===== LINKS ===== */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== RAIN (SOFTER) ===== */
.rain img {
    position: fixed;
    top: -50px;
    width: 25px;
    opacity: 0.6;
    pointer-events: none;
}

.rain1 img:nth-child(1) { left: 15%; animation: fall 7s linear infinite; }
.rain1 img:nth-child(2) { left: 45%; animation: fall 9s linear infinite; }
.rain1 img:nth-child(3) { left: 75%; animation: fall 8s linear infinite; }

.rain2 img:nth-child(1) { left: 25%; animation: fall 4s linear infinite; }
.rain2 img:nth-child(2) { left: 55%; animation: fall 5s linear infinite; }
.rain2 img:nth-child(3) { left: 85%; animation: fall 4.5s linear infinite; }

@keyframes fall {
    to {
        transform: translateY(110vh);
    }
}