/* --- RESET & BASICS --- */
body {
    /* The main background behind the site (Lace/Bows pattern) */
    background-color: #ffe6ea; 
    background-image: url('https://files.catbox.moe/t07i4z.png'); /* Example generic pink pattern */
    color: #000;
    font-family: 'VT323', monospace; /* Pixel font style */
    margin: 0;
    padding: 20px;
    font-size: 18px;
}

a {
    color: #b94e68;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    cursor: help;
    text-decoration: underline;
    color: #000;
}

.main-container {
    /* 1. Size and Centering */
    width: 1200px;
    max-width: 95%;
    margin: 0 auto;

    /* 2. BACKGROUND COLOR (Use this, NOT background-image) */
    background-color: #fff0f5; 

    /* 3. THE BORDER SETTINGS */
    /* This creates the space for the lace */
    border: 30px solid transparent;

    /* 4. THE LACE IMAGE */
    /* Link to your NEW hollow frame image here */
    border-image-source: url('https://mdn.github.io/css-examples/tools/border-image-generator/border-image-6.svg');

    /* 5. SLICING */
    /* This number depends on your image size. */
    /* If your image is 90x90 and the border is 30 wide, use 30. */
    border-image-slice: 30; 

    /* 6. REPEAT */
    /* 'round' makes it tile perfectly without cutting off */
    border-image-repeat: round;

}

/* --- HEADER --- */
header {
    background-color: #000;
    color: #ffc0cb;
    text-align: center;
    padding: 20px;
    margin-bottom: 15px;
    border: 2px solid #ffc0cb;
    font-family: 'Creepster', cursive; /* Gothic font */
    letter-spacing: 2px;
}

header h1 {
    margin: 0;
    font-size: 3em;
}

/* --- GRID LAYOUT --- */
.grid-layout {
    display: grid;
    /* Left Col | Center Col | Right Col */
    grid-template-columns: 200px 1fr 200px; 
    gap: 15px;
    margin-bottom: 15px;
}

/* --- GENERIC BOX STYLING --- */
.box {
    border: 1px solid #000;
    background-color: #fff;
    margin-bottom: 15px;
    padding: 5px;
}

/* Headers inside boxes */
.box h3 {
    background-color: #000;
    color: #fff;
    margin: 0 0 10px 0;
    padding: 3px;
    text-align: center;
    font-family: 'Creepster', cursive;
    letter-spacing: 1px;
}

/* --- SPECIFIC MODULES --- */

/* Navigation Styling */
.nav-box ul {
    list-style-type: square; /* Square bullets */
    padding-left: 20px;
    line-height: 1.5;
}

/* Update Log Scroll */
.scroll-box {
    height: 150px;
    overflow-y: scroll; /* Makes the text scrollable inside */
    border: 1px inset #ccc;
    padding: 5px;
    background-color: #000;
    color: #fff;
    font-size: 0.9em;
}

/* Featured Images */
.featured-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.featured-item img {
    width: 100%;
    border: 1px solid #000;
}

/* Profile Image */
.profile-box img {
    width: 100%;
    display: block;
}

/* --- BOTTOM SECTION (Chat/Poll) --- */
.bottom-section {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Chat is wider than Poll */
    gap: 15px;
}

.chat-window {
    background-color: #ffe6ea;
    height: 120px;
    border: 1px dashed #b94e68;
    padding: 10px;
}

.main-container {
    /* 1. Size and Centering */
    width: 1200px;
    max-width: 95%;
    margin: 0 auto;

    /* 2. BACKGROUND COLOR (Use this, NOT background-image) */
    background-color: #fff0f5; 

    /* 3. THE BORDER SETTINGS */
    /* This creates the space for the lace */
    border: 30px solid transparent;

    /* 4. THE LACE IMAGE */
    /* Link to your NEW hollow frame image here */
    border-image-source: url('https://vampireapologist.neocities.org/images/borders_and_backgrounds/borderhearts.png');

    /* 5. SLICING */
    /* This number depends on your image size. */
    /* If your image is 90x90 and the border is 30 wide, use 30. */
    border-image-slice: 30; 

    /* 6. REPEAT */
    /* 'round' makes it tile perfectly without cutting off */
    border-image-repeat: round;

}
/* --- FOOTER --- */
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    border-top: 1px dashed #000;
    padding-top: 10px;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .grid-layout, .bottom-section {
        grid-template-columns: 1fr; /* Stack everything on phones */
}
}