Template:Mainpage.css

/* Header */
#mainpage-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8ff;
    border: 2px solid #cc0000;
    border-radius: 12px;
    padding: 15px;
    font-size: 120%;
}

/* Header logo and text */
#mainpage-header .header-logo { flex:0 0 auto; margin-right:15px; }
#mainpage-header .header-text { flex:1; }

/* Category boxes */
.mainpage-categories {
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:15px;
}
.mainpage-categories .category-box {
    flex:1;
    display:flex;
    padding:10px;
    border:1px solid #aaa;
    border-radius:8px;
    align-items:center;
    transition: box-shadow 0.2s;
}
.mainpage-categories .category-text { flex:1; }
.mainpage-categories .category-icon {
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.mainpage-categories .category-box:hover {
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    cursor:pointer;
}

/* Discord box */
#mainpage-discord {
    text-align:center;
    margin-top:20px;
}
#mainpage-discord .discord-box {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid #5865F2;
    border-radius:8px;
    padding:8px 12px;
    background:#f0f2ff;
    transition:box-shadow 0.2s;
}
#mainpage-discord .discord-box img { vertical-align:middle; }
#mainpage-discord .discord-box:hover {
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    cursor:pointer;
}
#mainpage-discord p { margin:0; }

/* Optional category-specific colors */
.category-pokehero { background:#eaf9e8; }
.category-moves { background:#e8f1fa; }
.category-items { background:#fff3e6; }
.category-locations { background:#f6e8fa; }
.category-characters { background:#fceaea; }
.category-mechanics { background:#eaf8f9; }